JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<div class="fluid-fixed-fluid clearfix">
  <div class="column-a">200px fixed column A. 200px fixed column A. 200px fixed column A. 200px
    fixed column A. 200px fixed column A. 200px fixed column A. 200px fixed
    column A. 200px fixed column A. 200px fixed column A. 200px fixed column
    A. 200px fixed column A. 200px fixed column A. 200px fixed column A. 200px
    fixed column A. 200px fixed column A. 200px fixed column A. 200px fixed
    column A. 200px fixed column A. 200px fixed column A. 200px fixed column
    A. 200px fixed column A. 200px fixed column A. 200px fixed column A. 200px
    fixed column A. 200px fixed column A. 200px fixed column A. 200px fixed
    column A. 200px fixed column A. 200px fixed column A. 200px fixed column
    A. 200px fixed column A. 200px fixed column A. 200px fixed column A. 200px
    fixed column A.</div>
  <div class="column-b">200px fixed column B. 200px fixed column B. 200px fixed column B. 200px
    fixed column B. 200px fixed column B. 200px fixed column B. 200px fixed
    column B. 200px fixed column B. 200px fixed column B. 200px fixed column
    B. 200px fixed column B. 200px fixed column B. 200px fixed column B. 200px
    fixed column B. 200px fixed column B. 200px fixed column B. 200px fixed
    column B. 200px fixed column B. 200px fixed column B. 200px fixed column
    B. 200px fixed column B. 200px fixed column B. 200px fixed column B. 200px
    fixed column B. 200px fixed column B. 200px fixed column B. 200px fixed
    column B. 200px fixed column B. 200px fixed column B. 200px fixed column
    B. 200px fixed column B. 200px fixed column B. 200px fixed column B. 200px
    fixed column B. 200px fixed column B. 200px fixed column B. 200px fixed
    column B. 200px fixed column B. 200px fixed column B. 200px fixed column
    B. 200px fixed column B. 200px fixed column B. 200px fixed column B. 200px
    fixed column B. 200px fixed column B. 200px fixed column B. 200px fixed
    column B. 200px fixed column B....

CSS

h1 {
  font-size: 2em;
  margin: .5em 0;
}
/* clearfix */
 .clearfix:after {
  content:".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  overflow: hidden;
}
.clearfix {
  display: inline-block;
  vertical-align: bottom;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}
/* fixed-fluid-fixed layout */
 .fluid-fixed-fluid {
  display: block;
  /* room for fixed columns */
  /* border, padding, or margin can be used */
  border-left: 200px solid #ff9999;
  border-right: 200px solid #9999ff;
  background-color: #99ff99;
}
/* left fixed column */
 .column-a {
  /* position fixes IE6 display under border */
  position: relative; 
  float: left;
  width: 200px;
  margin-left: -200px;
}
/* right fixed column */
 .column-b {
  /* position fixes IE6 display under border */
  position: relative; 
  float: right;
  width: 200px;
  margin-right: -200px;
}
column-c {
  width: 100%;
}
}