JSFiddle - React, Tailwind, and code Playground

by Sanan Yuzb

HTML

<div class="container">
<div class="block left"></div>
<div class="block middle"></div>
<div class="block right"></div>
</div>

CSS

/*Setup Environment */
html                 { box-sizing: border-box;  }
*, *:before, *:after { box-sizing: inherit; }
body                 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; margin:0; padding:0; }

.block               { float:left; display:inline-block;  } 

/*
Calc Demo 100% Container, equally distribute containers within the box.
--
In this demo, we make the width of each box 100% divided by the number of boxes then subtract the margin left & right.
As you scale the page the box will always be 1/3 of the total width.
*/

.container  { width:80%; height:200px; margin: 0 auto; }

.block    { 
  width: calc(100% / 3 );
  height:100%; 
  }

.left {
  background-color:tomato;

}
 .middle {
      background-color: #64b5f6;
} 

.right {
    background-color:red;
}