У меня есть блок div, внутри которого находится ещё 2 блока div. Во втором - ещё два блока и в каждом из них - два блока div. Нужно расположить их на одной линии. Подскажите как это можно сделать
<div class="header">
<div class="nameCountry col-lg-4 col-md-3 col-xs-2">
<p>Россия</p>
</div>
<div class="countryStatistics col-lg-6 col-md-8 col-xs-10">
<div class="countryStatistic col-lg-3 col-md-4 col-xs-5">
<div class="statistic1 col-lg-2 col-md-3 col-xs-4">
<p>средний уровень жизни в стране:</p>
</div>
<div class="statistic2 col-lg-1 col-md-1 col-xs-1">
<p>0%</p>
</div>
</div>
<div class="countryStatistic col-lg-3 col-md-4 col-xs-5">
<div class="statistic1 col-lg-2 col-md-3 col-xs-4">
<p>доступный бюджет:</p>
</div>
<div class="statistic2 col-lg-1 col-md-1 col-xs-1">
<p>0</p>
</div>
</div>
</div>
</div>
display: flex
;flex-direction: row
, а для зеленого такжеjustify-content: space-between