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; z-index: 999;
    display: block; float: left;
    top: 0; bottom : 0; left: 0; right: 0;
    width: .5em; height: auto;
    padding: 0; margin: 0 -.25em;
    border: 0;
    background: blue;
}

.fill-height {
    display: -webkit-box;
    display:    -moz-box;
    display:         box;
    
    -webkit-box-orient: inline-axis;
       -moz-box-orient: inline-axis;
            box-orient: inline-axis;
}


/* 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 auto;
}
img,
object,
embed {
  max-width: 100%;
  height: auto;
}
object,
embed {
  height: 100%;
}
img {
  -ms-interpolation-mode:...