JSFiddle - React, Tailwind, and code Playground

by laurentw

HTML

<div id="wrapper">
  <div id="zone1">
 zone1
  </div>
    <div id="zone2">
  zone2
  </div>
    <div id="zone3">
  zone3
  </div>
    <div id="zone4">
  zone4
  </div>
   <div id="zone5">
  zone5
  </div>
</div>

CSS

#wrapper
{
  display:flex;
  width:100%;
  flex-flow:column nowrap;
}

#zone1,#zone2
{
  display:flex;
  width:29%;
  border:1px solid #ccc;

}
#zone3
{
  display:flex;
  width:69%;
  border:1px solid #ccc;

}
#zone4,#zone5
{
  display:flex;
  width:100%;
  border:1px solid #ccc;
}