JSFiddle - React, Tailwind, and code Playground

by RichieHindle

HTML

<div class="table">
  <div class="row">
    <span class="cell red" style="width: 4em">This</span>
    <span class="cell yellow" style="width: 2em">is</span>
    <span class="cell green" style="width: 1em">a</span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell pink" style="width: 6em">test</span>
    <span class="cell orange" style="width: 1em">.</span>
  </div>
</div>

CSS

/* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:7em; }
  .row { display:table-row; }
  .cell { display:table-cell; padding: 0; margin: 0; border: 0; }

  /* this is where the colspan tricks works. */
  .span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .yellow { background:yellow; }
  .green { background:green; }
  .pink { background:pink; }
  .orange { background: orange; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }