TextArea ausrichten und Schaltfläche ohne Schaltfläche wird nach unten bewegt, wenn Wert eingefügt wird

Question

Ich versuche, einen Textbereich und eine Schaltfläche in derselben Zeile auszurichten. Ich habe es erfolgreich geschafft, der Code ist in der Geige unten (obwohl aus irgendeinem Grund die Geige sie nicht ausrichten wird).

Problem: Immer wenn ich einen Wert in die Schaltfläche einfüge, wird die Schaltfläche etwas 30px nach unten gehen, immer noch auf der gleichen Linie, aber nur niedriger als der Textbereich. Dies geschieht nur, wenn ein Wert innerhalb der Schaltfläche eingefügt wird.

der Code ist in der Geige All: https://jsfiddle.net/13qy0acp

Code:

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

Wenn Sie horizontal wollen zwei Elemente auszurichten, verwenden Sie die float Eigenschaft und legen Sie eine Breite, die nicht mehr zu fügt als 100% der Breite des Elternelements.

Beispiel:

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