title: Align textarea and button without button moving down when value is inserted
body: <p>I'm trying to align a text area and a button on the same line. I've successfully managed to do so, the code is in the fiddle below (though for some reason the fiddle won't align them). </p>
  
  <p>Problem: Whenever I insert a value in the button, the button will go something like 30px downwards, still on the same line but just lower than the text area. This will only happen when a value is inserted within the button.</p>
  
  <p>All the code is in the fiddle: <a href="https://jsfiddle.net/13qy0acp" rel="nofollow">https://jsfiddle.net/13qy0acp</a></p>
  
  <p>Code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="messagebox"&gt;
  &lt;p id="headings"&gt;&lt;textarea name="msg" style="height:40px;text-align:center" id="message" placeholder="Insert message"&gt;&lt;/textarea&gt;&lt;/p&gt;
  &lt;p id="button"&gt;&lt;input type="button" value="Send" onclick="submitChat()" id="innerbutton"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>