title: Getting form elements to line up with submit button using display: inline-block and ems
body: <p>I'm working on a responsive form design; the whittled down code is below. Why doesn't the SEND button line up properly with the other input fields?</p>
  <p>It's using a <code>margin-left:5em</code> which should line it up with the other input fields since the form labels also have a <code>width</code> of 5em, but no. Instead the button is offset to the left. What am I missing?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label, input, textarea {display: inline-block; vertical-align: top;}
  label {width: 5em; text-align: right;}
  input, textarea {width: 20em;}
  input[type="submit"] {margin-left: 5em; width: 6em;}      
  * { 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
      padding: 0;
      margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="#" method="post"&gt;
      &lt;div&gt;
          &lt;label for="form1_name"&gt;Name:&lt;/label&gt;
          &lt;input id="form1_name" name="name" type="text" placeholder="first and last name" required="required" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;label for="form1_email"&gt;Email:&lt;/label&gt;
          &lt;input id="form1_email" name="email" type="email" placeholder="your email address" required="required" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;label for="form1_message"&gt;Message:&lt;/label&gt;
          &lt;textarea id="form1_message" name="message" cols="30" rows="10" required="required"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
          &lt;input value="SEND" type="submit" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>