値が挿入されたときにテキストエリアとボタンをボタンを移動させずに整列させる

Question

テキストエリアとボタンを同じ行に揃えようとしています。私はうまくそのように管理している、コードは下のフィドルです（何らかの理由でフィドルがそれらを整列させません）。

問題：ボタンに値を挿入するたびに、ボタンは30pxのようになりますが、それでも同じ行にありますが、テキスト領域よりも低くなります。これは、値がボタン内に挿入された場合にのみ発生します。

すべてのコードがフィドルである：https://jsfiddle.net/13qy0acp

コード：

HTML

<div id="messagebox"> 
<p id="headings"><textarea name="msg" style="height:40px;text-align:center" id="message" placeholder="Insert message"></textarea></p> 
<p id="button"><input type="button" value="Send" onclick="submitChat()" id="innerbutton"></p> 
</div> 

CSS

#headings { 
text-align:center; 
display:inline-block; 
width:70% !important; 
margin-top:20px; 
} 
#message { 
width:100%; 
} 
#button { 
text-align:center; 
display:inline-block; 
width:8%; 
margin-top:-30px !important; 
border:solid black; 
height:50px; 
} 
#innerbutton { 
width:100%; 
height:20px; 
text-decoration:none; 
} 

Answer 1

あなたが水平に2つの要素を整列する場合は、使用floatプロパティを設定し、幅を設定しない親要素の幅の100％より大きい。

例：

textarea { 
    width:90%; 
    float: left; 
} 
button { 
    width:10%; 
    float: left; 
}