JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="columns">
  <div>
    <h5>Column Test</h5>
    <p>
      Testing Lots of columns with unequal content.
    </p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
</div>

<div class="columns">
  <div>
    <h5>Column Test</h5>
    <p>
      Testing Lots of columns with unequal content.
    </p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
</div>

<div class="columns">
  <div>
    <h5>Column Test</h5>
    <p>
      Testing Lots of columns with unequal content.
    </p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
</div>

<div class="columns">
  <div>
    <h5>Column Test</h5>
    <p>
      Testing Lots of columns with unequal content.
    </p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
  <div>
    <h5>Column Test</h5>
    <p>...</p>
  </div>
</div>

<hr />

<div class="columns">
  <div>
    <h5>Top Level Column One</h5>
    <p>
      This column should be span the entire left half of the screen. Its one of only
      two columns at this level.
    </p>
  </div>
  <div>
    <h5>Top Level Column Two</h5>
    <p>
      This column should cover the right half.
    </p>  
    <div class="columns">
      <div>
        <h5>Sub-Column One</h5>
        <div class="columns">
          <div>
            <h5>Sub-Sub 1</h5>
            <p>
              This column should be the fifth eighth of the screen.
            </p>
          </div>
          <div>
            <h5>Sub-Sub...

CSS

.columns {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: .5em;
}
  .columns > div {
    display: table-cell;
    background-color:#ddf;
  }

/* All of this is just for looks/clarity. */
body { font-size: 12px; color: #777; font-family: Arial, Helvetica, sans-serif; }
h5 { font-family: Georgia; font-size: 1.25em; border-bottom: 1px solid; color: #444; margin: 0 0 .4em; }