title: Using `box-sizing: border-box` with `inline-block` elements
body: <p>I'd like to use the <code>box-sizing: border-box</code> CSS property to split a form into a left and right half:</p>
  
  <pre><code>&lt;form class=container&gt;
    &lt;fieldset class=left&gt;
      &lt;label&gt;Description&lt;/label&gt;
      &lt;textarea name=description&gt;&lt;/textarea&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class=right&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input type=text name=name /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In order to make this work, I need to float both <code>&lt;fieldset&gt;</code> elements to the left:</p>
  
  <pre><code>.left, .right {
    width: 50%;
    margin-left: 0px;
    marign-right: 0px;
    box-sizing: border-box;
    float: left;
  }
  </code></pre>
  
  <p>The problem is of course that since the <code>&lt;fieldset&gt;</code>'s are floated, they are no longer in-flow, and the <code>&lt;form&gt;</code> element gets a height of 0 (unless i add a clearfix or something).  If I remove the float property and change their display to <code>inline-block</code>, they're back in flow, but they no longer line-up next to eachother.</p>
  
  <p>Is there some way to use <code>border-box</code> here without needing to add a clearfix element (or <code>:after</code> pseudo element)?</p>
  
  <p>For reference, <a href="http://jsfiddle.net/aaronj1335/amXeB/1/" rel="nofollow">here's</a> a fiddle that uses floats, and <a href="http://jsfiddle.net/aaronj1335/amXeB/" rel="nofollow">here's</a> a fiddle that uses inline-block.</p>