JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div id="headerBuilder">
....test...
  <div class="row">
    <div class="col" style="background-color:coral;">T</div>
    <div class="col" style="background-color:lightblue;">T</div>
    <div class="col" style="background-color:khaki;">T</div>
  </div>

  <div class="row">
    <div class="col" style="background-color:coral;"></div>
    <div class="col" style="background-color:lightblue;">T</div>
    <div class="col" style="background-color:khaki;"></div>
  </div>

  <div class="row">
    <div class="col" style="background-color:coral;"></div>
    <div class="col" style="background-color:lightblue;"></div>
    <div class="col" style="background-color:khaki;"></div>
  </div>

  <div class="row">
    <div class="col" style="background-color:coral;"></div>
    <div class="col" style="background-color:lightblue;"></div>
    <div class="col" style="background-color:khaki;"></div>
  </div>
....test...
</div>

CSS

#headerBuilder{
  background-color: #efefef;
  padding: 10px;
}

#headerBuilder .row {
  width: 100%;
  height: 100px;
  border: 1px dashed #c3c3c3;
  display: flex;
  margin-bottom: 10px;
}

#headerBuilder .row .col:nth-of-type(1) {flex-grow: 1;text-align: left;}
#headerBuilder .row .col:nth-of-type(2) {flex-grow: 1;text-align: center;}
#headerBuilder .row .col:nth-of-type(3) {flex-grow: 1;text-align: right;}