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="flex-row">
        <div class="red col-size-1" >Box 01</div>
        <div class="blue col-size-1" >Box 02</div>
    </div>
        

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