Лучше использовать CSS flexbox (
https://tproger.ru/translations/how-css-flexbox-works/ ;
https://html5book.ru/css3-flexbox/). Просто нужно для себя понять, как он работает. Я набросал здесь не самый лучший вариант (форк от вашего скетча):
https://codepen.io/theUniverseAsMatrix/full/rNeRMVV
Раньше использовали
float. Полезно будет посмотреть, как это сделано в Bootstrap:
https://getbootstrap.com/docs/4.1/layout/grid/ Возможно, вы уже смотрели, но все же.
Прим.: полупрозрачный белый абрис использован для демонстрации границ элемента. 
