如何将按钮与文本区域对齐

Question

正如你在这个小提琴中所看到的https://jsfiddle.net/3spqLzx1/1/ 我想用我的按钮垂直（在同一行）我的文本区域对齐，但按钮继续向下推。你能告诉我一种让它们对齐的方法吗？谢谢

文字区+按钮HTML

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

CSS

#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#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:50px;
margin-top:25px;
background-color:rgb(22, 33, 211);
text-decoration:none;
margin-bottom:30px;
}

Answer 1

以下是更改：

{
 "generator-jhipster": {
"jhipsterVersion": "3.0.0",
"baseName": "blog",
"packageName": "com.albertofaci.blog",
"packageFolder": "com/albertofaci/blog",
"serverPort": "8080",
"authenticationType": "session",
"hibernateCache": "no",
"clusteredHttpSession": "no",
"websocket": "no",
"databaseType": "mongodb",
"devDatabaseType": "mongodb",
"prodDatabaseType": "mongodb",
"searchEngine": "no",
"buildTool": "gradle",
"enableSocialSignIn": false,
"rememberMeKey": "94cf21b11aff8d8d4a9b9b3724834876b995e5b1",
"useSass": false,
"applicationType": "monolith",
"testFrameworks": [
  "gatling"
],
"enableTranslation": true,
"nativeLanguage": "en",
"languages": [
  "en",
  "es"
]
}}

jsFiddle

Answer 2

＆＃13;

＆＃13;

#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#message {
width:100%;

}
#button {
 position:absolute; 
margin-top:20px;
text-align:center;
display:inline-block;
width:8%;
margin-top:20px !important;
border:solid black;
height:50px;
}
#innerbutton {
  
width:100%;
height:50px;
margin-top:0px;
background-color:rgb(22, 33, 211);
text-decoration:none;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;