JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topNav" >
  <div class="toolBar">
    <div id="leftTools">
      <div id="left1">
          fixed
      </div>
      <div id="left2" >                            
          fixed
      </div>
      <div id="left3" >                            
          adjustable
      </div>
      <div id="left4" >                            
          fixed 
      </div>
    </div>                    
    <div id="rightTools">
      <div id="right1">
            fixed
      </div>
      <div id="right2">
            fixed
      </div>
    </div>                    
  </div>
</div>

CSS

#leftTools{
  float:left;
}
#leftTools > div{
  display:inline-block;
  width:100px;
  height:100px;
  border:1px dotted black;
}
#rightTools{
  float:right;
}
#rightTools > div{
  display:inline-block;
  width:100px;
  height:100px;
  border:1px dotted black;
}