css - Floated div wraps in table-cell if container is smaller than 169 px -

two divs (red , yellow) should side side using float:left property. when width of container div becomes "too small", yellow div pops below red div.

https://jsfiddle.net/vt5zf3z0/

<div class="container">       <div class="first">           <div class="innerfirst">blablub</div>       </div>       <div class="second">           <div class="innersecond">when container smaller 169px, yellow div pops below red div</div>       </div>     </div> 

currently, the container becomes "too small" when width < 169px in firefox , width < 167x in chrome.

how keep red , yellow div side side in smaller container?

1. remove display:table-cell innerfirst , innersecond.
2. remove display:table .first , .second , add display:table-cell both of them.
3. add display:table .container

https://jsfiddle.net/vt5zf3z0/2/