JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<div id="main">
    <div id="left" class="row">
  <div class="six columns debug" style="height: 100px;">A</div>
  <div class="six columns debug" style="height: 300px;">B</div>
  <div class="six columns debug" style="height: 100px;">A</div>
  <div class="six columns debug" style="height: 300px;">B</div>
</div>

<div id="right" class="row">
  <div class="six columns debug" style="height: 100px;">C</div>
  <div class="six columns debug" style="height: 300px; visibility:hidden;">D</div>
    <div class="six columns debug" style="height: 100px;">C</div>
</div>
</div>

CSS

.debug {
  border: solid;
  border-color: red;
}

#main {
    width: 100%;
}

.row {
    width: 300px;
}

#left {
    float: left;
}

#right {
    float:left;
}