JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
   <div id="left">
       left left left
   </div>
   <div id="right">
        right right right
   </div>
</div>

<div id="container2">
   <div id="left2">
       <div class="inner">
          left left left
       </div>    
   </div>
   <div id="right2">
       <div class="inner">
           right right right
       </div>
   </div>
</div>

<div id="container3">
   <div id="left3">
       <div class="inner">
          left left left
       </div>    
   </div>
   <div id="right3">
       <div class="inner">
           right right right
       </div>
   </div>
   <div id="middle3">
       <div class="inner">
           middle middle middle 
           middle middle middle 
           middle middle middle 
           middle middle middle 
           middle middle middle 
       </div>
    </div>
</div>

CSS

#left { width:50%; float:left; }
#right { padding-left:50%; }

#container2 { clear:both; margin-top:30px;}
#left2 { width:50%; float:left;  }
#left2 .inner { border:1px solid #999999; padding:10px; }

#right2 { padding-left:51%; }
#right2 .inner { border:1px solid #9933EE; padding:5px; }

#container3 { clear:both; margin-top:30px;}
#left3 { width:150px; float:left;  }
#left3 .inner { border:1px solid #999999; padding:5px; }

#right3 { width:150px; float:right; }
#right3 .inner { border:1px solid #9933EE; padding:5px; }

#middle3 { padding:0px 160px;}
#middle3 .inner { padding:5px; border:1px dashed #111; }