title: Block element inside inline-block acting strangely in Firefox
body: <p>Can anyone explain this behavior in FF?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/4mrt8wq3/" rel="nofollow">http://jsfiddle.net/4mrt8wq3/</a></p>
  
  <pre><code>&lt;style&gt;
      .b { display: inline-block; }
      #a { display: block; }
  &lt;/style&gt;
  
  &lt;div class="b"&gt;
      &lt;label&gt;xxxxxxxxxx&lt;/label&gt; 
      &lt;input type="text" id="a"/&gt;
  &lt;/div&gt;
  &lt;div class="b"&gt;
      &lt;label&gt;xxxxxxxxxx&lt;/label&gt;
      &lt;div&gt; / &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Only in firefox, the first div is positioned one line lower than the second.  It works correctly in Chrome and IE (at least IE11).  It's as if the block element within the inline-block is wrapping below the second element for some reason.</p>
  
  <p>Using overflow: hidden on the first div fixes the problem, but the second div is then positioned slightly oddly with about 4 or 5 pixels of margin above it.  Placing overflow-hidden on both causes it to render correctly.</p>
  
  <p><strong>I am not looking for a solution to the problem</strong>, as I've already found one, but I'm at a loss of explaining the behavior... <strong>Can anyone explain WHY it's doing this?</strong></p>