How to split div into 2 columns using CSS?

To split div into 2 columns using CSS, we use flexbox.

For instance, we write

<div id="content">
  <div id="left">
    <div id="object1"></div>
    <div id="object2"></div>
  </div>

  <div id="right">
    <div id="object3"></div>
    <div id="object4"></div>
  </div>
</div>

to add nested divs.

Then we write

#content {
  display: flex;
}

#left,
#right {
  flex: 50%;
}

to make the outer div a flex container with display: flex; and make its contents display side by side.

And then we make the div with IDs left and right take 50% of the space with flex: 50%;