HTMLとCSSの水平調整

Question

私はウェブページにチャット機能を構築していますが、私が念頭に置いている投稿フィールドのデザインに問題があります。私は自分の目標の写真と、現在というコードを提供します。

<div class="submitField"> 
    <textarea class="submitArea" form="usrform"> </textarea> 
    <form action="" id="usrform"> 
    <input type="submit" class="submitBtn"> 
    </form> 
    </div> 

とCSSコード：ここ

とは、HTMLコードです

.submitField { 
    position: fixed; 
    bottom: auto; 
    width: 100%; 
    padding: 10px; 
    background-color: red; 
     display: inline-block; 
} 



.submitArea { 
    width: 50vh; 
    height: 8vh; 
    padding: 5px 5px; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    background-color: #f8f8f8; 
    font-size: 16px; 
    resize: none; 
    color: black; 
     position: relative; 
} 

.submitBtn { 
    color: black; 
} 

私はすべての上のクラスを使用すると、最適ではないかもしれないけど、私は間違っている右の他に何をやっています今？私は新しいを得るために変更する必要があるのヒント？

Answer 1

は、ボタンをposition:absolute;を与え、その後、それをleft: 50px;を与えるとright: 50px;

Answer 2

は、私が左には50pxよりも少しを行う必要があり

.submitField { 
    position: fixed; 
    bottom: auto; 
    width: 100%; 
    padding: 10px; 
    background-color: red; 
    display: flex; 
} 



#usrform { 
    width: 15%; 
    display: inline-block; 
    align-self: center; 
} 



.submitBtn { 
    color: black; 
    display: block; 
    margin: 0 auto; 
}