CSS — Putting Stuff Side By Side

I took much more time than I would have liked learning how to do this (maybe I just suck at googling, who knows). As such, this article serves to make this task as easy and pain-free as possible. And also to remind myself how exactly to do this a couple of months down the road when I forget how to do this (StackOverflow links can be quite elusive sometimes).

What We Aim To Achieve

Putting 2 divs side by side (I’ll set a background color to differentiate the divs but you don’t necessarily need to do this). It should look something like this:

The first div is in blue, while the second div is in red.

The HTML Code

<div class="row">
    <div class="left">left section</div>
    <div class="right">right section </div>
</div>

Create a div with class="row", and 2 divs inside this div, one with class="left" and another withclass="right" (you can use whatever class name you want).

The CSS Code

.row {
    display: flex
}
.left {
    flex: 1
}
.right {
    flex: 1
}