JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="main" class="clearfix">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </div>
   <div id="main_new" class="clearfix">
    <div id="div1_new">div1_new</div>
    <div id="div2_new">div2_new</div>
  </div>
</body>

CSS

body{
  margin: 0;
}
#div1{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#div2{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}
#div1_new{
    float:left;
}
#div2_new{
    float:right;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}