JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<div class="l">left</div>
<div class="m">middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br /></div>
<div class="r">right</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.l, .r {
    width: 33%;
    height: 100%;
    position: fixed;
    background: lightgreen;
    top: 0;
}
.l { left: 0; }
.r { right: 0; }
.m {
    margin: 0 33%;
    min-height: 100%;
    background: lightblue;
}