JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blc0">
  <div class="blc1">A</div>
  <div class="blc2">B</div>
  <div class="blc3">C</div>
  <div class="clr"></div>
</div>
<div class="blc4">D</div>

CSS

.blc1, .blc2, .blc3 {
  border:1px solid green;
  width:30px;
  height:30px;
  float:left;
}

.blc0, .blc4 {
  border:1px solid red;
  width:200px;
}

.clr {
  clear:both;
}