form fields not aligning properly when using CSS table
<p>In the following HTML (also in <a href="https://jsfiddle.net/n3145f60/14/" rel="nofollow">jsfiddle</a>) I am using CSS tables to align the fields in the form:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
     form {
       display: table;
       width: 200px;
     }
     form&gt;div {
       display: table-row;
     }
     form&gt;div&gt;label {
       display: table-cell;
       padding-right: 10px;
       text-align: right;
       vertical-align: middle;
     }
     form&gt;div&gt;input, form&gt;div&gt;textarea {
       display: table-cell;
       }     
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;div&gt;
        &lt;label for='form-name'&gt;Name:&lt;/label&gt;
        &lt;input id='form-name' type='text'/&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for='form-email'&gt;Email:&lt;/label&gt;
        &lt;input id='form-email' type='email'/&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for='form-comments'&gt;Comments:&lt;/label&gt;
        &lt;textarea id='form-comments'&gt;&lt;/textarea&gt;
      &lt;/div&gt;            
      &lt;div&gt;
        &lt;input type='submit'/&gt;
        &lt;input type='reset'/&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>My questions are:</p>

<ol>
<li>why does the textarea cell have a greater width than that of the cells above it?</li>
<li>why don't the two button input fields reside on the same row?</li>
</ol>

<h1>update</h1>

<p>Here's an updated <a href="https://jsfiddle.net/n3145f60/15/" rel="nofollow">jsfiddle</a> based on the accepted answer.</p>