title: HTML/CSS Textarea and Div are different height
body: <p>I've styled a textarea with min/max width and min height (to allow scaling vertically, but in no other direction), and put a div next to it with the same height.  For some reason, although the CSS doesn't lie they're different heights.  Anyone know why and if there's a way to fix this other than to adjust the height of either element?</p>
  
  <p>CSS:</p>
  
  <pre><code>#textarea {
      float: left;
      display: block;
      margin-left: 30px;
      min-width: 300px;
      max-width: 300px;
      min-height: 200px;
      border: 1px dashed black;
  }
  #output {
      float: left;
      display: block;
      margin-left: 30px;
      width: 300px;
      height: 200px;
      border: 1px dashed black;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/u1c3k072/" rel="nofollow">Fiddle</a></p>