JSFiddle - React, Tailwind, and code Playground

by shyamh

HTML

<div class="wrapper">
  <div class="col1">
    <div class="inner">
      This is the first, fixed width column where the guide will sit.<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin.<br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin.<br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor nec est porttitor...

CSS

.wrapper {
  position: absolute;
  background-color: #484848;
  height: 100%;
  width: 100%;
}

.col1,
.col2 {
  float: left;
}

.col1 .inner,
.col2 .inner {
  padding: 20px;
}

.col1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 200px;
  color: #cfcfcf;
  font-family: Helvetica,Sans-Serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 0px;
  z-index: 1000;
  overflow: scroll;
}

.col2 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 200px;
  /* width of col 3 */
  margin: 8px 8px 8px 8px;
  /* sample only */
  box-shadow: 0px 0px 5px 6px rgba(33, 33, 33, 0.25);
}

.theinnerframe {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}