JSFiddle - React, Tailwind, and code Playground

HTML

<!--LEFT SECTION COLUMNS--> 
  <div id="sections">
    <div class="sectionLfirst">
      <h3>fdkfjdkfj</h3>
      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLsecond">
      <h3>fdkfjdkfj</h3>
      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLthird">
      <h3>fdkfjdkfj</h3>
      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
 
 <!--LEFT SECTION COLUMNS--> 
    <div class="clearfix"></div>
    <div class="sectionRfirst">
      <h3>1fdkfjdkfj</h3>
      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRsecond">
      <h3>2fdkfjdkfj</h3>
      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRthird">
      <h3>3fdkfjdkfj</h3>
      <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    
  </div>

CSS

*{
  padding:0px;
  margin:0px;
}
#sections{   /*--LEFT SECTION COLUMNS--*/
  width:1000px;
  height:400px;
  margin:0 auto;
  background:red;
}
.sectionLfirst{
  width:500px;
  background:orange;
}
.sectionLsecond{
  width:500px;
  background:skyblue;
}
.sectionLthird{
  width:500px;
  background:Indigo;
  clear:both;
}  
  .sectionRfirst{  /*--RIGHT SECTION COLUMNS--*/
  float:right; 
  width:500px;
  background:orange;
  clear:both;
}
.sectionRsecond{
  float:right;
  width:500px;
  background:skyblue;
  clear:both;
  
}
.sectionRthird{
  float:right;
  width:500px;
  background:Indigo;
  clear:both;
}