title: Floated div wraps in table-cell if container is smaller than 169 px
body: <p>Two divs (red and yellow) should always be side by side using the float:left property. But when the width of the container div becomes "too small", than the yellow div pops below the red div. </p>
  
  <p><a href="https://jsfiddle.net/vt5zf3z0/" rel="nofollow">https://jsfiddle.net/vt5zf3z0/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
        &lt;div class="first"&gt;
            &lt;div class="innerFirst"&gt;Blablub&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="second"&gt;
            &lt;div class="innerSecond"&gt;When the container is smaller than 169px, than the yellow div pops below the red div&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Currently, the the container becomes "too small" when the width &lt; 169px in Firefox and the width &lt; 167x in Chrome. </p>
  
  <p>How to keep the red and the yellow div side by side in a smaller container?</p>