Плаваючий div обгортає у комірку таблиці, якщо контейнер менший 169 px - css

Дві диви (червоний і жовтий) завжди повинні бути поруч, використовуючи float: left властивість. Але коли ширина контейнера діва стає "занадто малою", ніж жовтий div вискакує нижче червоного div.

https://jsfiddle.net/vt5zf3z0/

<div class="container">
<div class="first">
<div class="innerFirst">Blablub</div>
</div>
<div class="second">
<div class="innerSecond">When the container is smaller than 169px, than the yellow div pops below the red div</div>
</div>
</div>

Наразі контейнер стає "занадто малим", коли ширина <169px у Firefox та ширина <167x у Chrome.

Як тримати червоний і жовтий діви поруч у меншій ємності?

Відповіді:

1. Видалити display:table-cell від внутрішньогоПерша і внутрішняСекунда.
2. Видалити display:table від .first і .second і додати display:table-cell обом.
3. Додати display:table до .container

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