Without flex

These 2 divs are displayed as 'block' elements.

Box 01
Box 02

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

Step 1

Set the 'display' property of the parent/row to 'flex'

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

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

Box 01
Box 02





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