JSFiddle - React, Tailwind, and code Playground

HTML

text before

<div class="outer-box">
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
</div>

text after

CSS

.outer-box
{
  width: 200px;
  height: auto; /*if height: auto > no margin-bottom will be applied*/
  background-color: #f1f1f1;
  border: thin dotted #ccc;
  margin-bottom: 40px;
}
.innerbox-left
{
  width: 100px;
  background-color: blue;
  float: left;
}
.innerbox-right
{
  width: 100px;
  background-color: blue;
  float: right;
}