title: Textarea is pushing down the element to the left of it?
body: <p>I have the following layout: <a href="http://jsfiddle.net/w8VCH/4/" rel="nofollow">fiddle</a>. </p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="left"&gt;
      &lt;div&gt;label not aligned&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
      &lt;div&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;div class="left"&gt;
      &lt;div&gt;label aligned&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
      &lt;div&gt;&lt;input&gt;&lt;/input&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  /*...css in the fiddle*/
  </code></pre>
  
  <p>In it you can see that there are 2 rows, one with a textarea and the other with an input for comparison. As you can see the first row's label is pushed down even if the line-height and height are the same as in the right column. In the 2nd row with the input you can see the behavior I was expecting where the label is essentially centered and in alignment with the input to the right. This occurs even if the textarea has resize none. </p>
  
  <p>Does anyone know why this is happening? I know how to get it to work using float left but I wanted to know if there's a cleaner solution. Thanks in advance.</p>