Настройка отображения блоков

Цель: Мне нужно чтобы блоки красиво и ровно размещались внутри родительского. Как на скриншоте

Я же имею ситуацию где блоки растягивают родительский по высоте и не умещаются друг с другом как будто им не хватает ширины.

.left-box 
float: left;
width: 35%;
text-align: left;
max-width: 100%;

.left-box.profile-details 
width: 49%;
float: none;

.column2
float: right;
clear: right;
width: 49%;

Единственный вариант сейчас для меня добиться нужного мне отображения это поменять left-box details profile-details и column2 местами в html

Но в этом случае в мобильной версии блоки смешиваются друг с другом, а мне хотелось бы настроить css, чтобы отображалось ровно и не нужно было ничего менять в html.

Благодарю душевно за любые попытки помочь :)