JSFiddle - React, Tailwind, and code Playground

by rvrjp7

HTML

<div id="mainContainer">
<div id="left">left</div>

<div id="left2">left2</div>

<div id="centerContainer">
<div id="middle1">left in middle div</div><div id="middle2">right in middle div</div>
</div>

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

CSS

#mainContainer{
  width:100%;
  border: 1px red solid
}
#left{
  width:20px;
  float:left;
  display:inline-block;
  border:1px blue solid
}
#left2{
  width:20px;
  float:left;
  display:inline-block;
  border:1px blue solid
}
#centerContainer{
  display: inline-block;
    width: 768px;
    margin: 2px;
    background: #E5DE99;
}
#middle1{
  display:inline-block;
  float:left
}
#middle2{
  display:inline-block;
  float:right
}
#right{
   width:20px;
  float:right;
  display:inline-block;
  border:1px blue solid
}