Flexbox

Without flex

These 2 divs are displayed as 'block' elements.

With display set as 'flex' i.e. display: flex;

<div style="display: flex;">
    <div class="red">Box 01</div>
    <div class="blue">Box 02</div>
</div>

Let's set width of 'children' elements

<div style="display: flex;">
    <div class="red" style="flex: 1">Box 01</div>
    <div class="blue" style="flex: 1">Box 02</div>
</div>

The 'children' divs have their 'flex' set to 1

Now we can do the same with classes

<div class="row">
    <div class="red col-size-1" >Box 01</div>
    <div class="blue col-size-1" >Box 02</div>
</div>
    

<div class="row">
    <div class="red col-size-1" >Box 01</div>
    <div class="blue box-2" >Box 02</div>
</div>