JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col a">
  <h1>A</h1>
  w:%percent
<br/>
  h:100%
</div>

<div class="col b">
  <h1>B</h1>
  w:pixel
  <br/>
  h:100%
</div>

<div class="col c">
<h1>C</h1>
  <span>w:remaining</span>
  <br/>
  h:100%
</div>

<div class="col d">
<h1>D</h1>
  w:pixel
  <br/>
  h:100%
</div>

<div class="col e">
<h1>E</h1>
  w:%percent
  <br/>
  h:100%
</div>

CSS

html,body{
  height:100%;
  margin:0px;
  padding:0px;
}
.col{
  display:inline-block;
  position:relative;
  height:100%;
  padding:0 10px;
}

.a{
  background-color:#2a85ff;
  width:20%;
}
.b{
  background-color:#83bf6e;
  width:100px;
}
.c{
  background-color:#ff6a55;
}
.c span{
  font-weight: bolder;
}
.d{
  background-color:#8e59ff;
  width:200px;
}
.e{
  background-color:#b5e4ca;
  width:20%;
}