Pływające zawijanie div w komórce tabeli, jeśli kontener jest mniejszy niż 169 px - css

Dwa divy (czerwony i żółty) powinny zawsze znajdować się obok siebie za pomocą właściwości float: left. Ale kiedy szerokość kontenera div staje się „zbyt mała”, wtedy żółty div pojawia się poniżej czerwonego 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>

Obecnie kontener staje się „zbyt mały”, gdy szerokość Firefoksa wynosi <169px, a w Chrome - 167x.

Jak utrzymać czerwony i żółty podział obok siebie w mniejszym pojemniku?

Odpowiedzi:

1. Usunąć display:table-cell od innerFirst i innerSecond.
2. Usunąć display:table od .first i .second i dodaj display:table-cell dla nich obojga.
3. Dodaj display:table do .container

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