JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="row fill-height">
    <div class="col-3" style="background: #f2f2f2">
        sadfasdfasdfasdfasd fasdf sad fasdf asdf asdf a dsc asdf ansd ufasdfuasdkfj asdkjc asdcjka sdca sdca sdkcacd asdc asdc asdc asdc adcasdc adsc adsc asdc adc
    </div>
    <hr class="splitter">
    <div class="col-9" style="background: #e8e8e8">
        sadfasdfasdfasdfasd fasdf sad fasdf asdf asdf a dsc asdf ansd ufasdfuasdkfj asdkjc asdcjka sdca sdca sdkcacd asdc asdc asdc asdc adcasdc adsc adsc asdc adc
    </div>
</div>

CSS

.row {
    overflow: hidden;
}

.splitter {
    position: relative;
    display: block;
    top: 0; bottom : 0; left: 0; right: 0;
    width: auto; height: .5em;
    padding: 0; margin: 0;
    border: 0;
    background: blue;
}

@media (min-width: 55em) {
    
    .fill-height {
        display: table;
    }
    
    .fill-height .row [class|="col"],
    .fill-height .row [class|="span"],
    .fill-height .splitter {
        display: table-cell;
    }

    .splitter {
        float: left; z-index: 999;
        
        width: .5em; height: auto;
        padding: 0; margin: 0 -.25em; 
    }
}

/* SCAFFOLDING */
* {
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
[class^="row"] {
  width: 100%;
  max-width: 100%;
  min-width: 55em;
  margin: 0 auto;
  *zoom: 1;
}
[class^="row"]::before,
[class^="row"]::after {
  content: "";
  display: table;
}
[class^="row"]::after {
  clear: both;
}
[class^="row"] [class^="row"] {
  width: auto;
  max-width: none;
  min-width: 0;
}
[class^="row"] [class^="row"].collapse {
  margin: 0;
}
[class^="row"] [class^="row"].collapse [class|="col"],
[class^="row"] [class^="row"].collapse [class|="span"] {
  padding: 0;
}
[class|="col"],
[class|="span"] {
  position: relative;
  float: left;
  min-height: 1px;
  margin: 0;
}
[class|="col"] + [class|="col"]:last-child,
[class|="span"] + [class|="col"]:last-child,
[class|="col"] + [class|="span"]:last-child,
[class|="span"] + [class|="span"]:last-child {
  float: right;
}
[class|="col"] + [class|="col"].end,
[class|="span"] + [class|="col"].end,
[class|="col"] + [class|="span"].end,
[class|="span"] + [class|="span"].end {
  float: left;
}
[class|="col"] {
  padding: 0 1em;
}
[class|="col"] [class^="row"] {
  margin: 0 -1em;
}
[class|="span"] {
  padding: 0;
}
[class|="span"] [class^="row"] {
  margin: 0;
}
.centered {
  float: none;
  margin: 0...