JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

  <div id="box1">BOX1</div>
  <div id="box2">BOX2</div>
  <div id="box3">BOX3</div>
  <div style='clear:both'></div>

</div>

CSS

#container {
  border: 2px solid red;
  position: relative;
}

#box1 {
  border: 1px solid blue;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

#box2 {
  border: 1px solid green;
  width: 33%;
  position: relative;
  display: inline;
  float: left;
}

#box3 {
  border: 1px solid purple;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}