JSFiddle - React, Tailwind, and code Playground

by jakelauer

HTML

<div id='wrapper'>
    <div id='leftbox'>
        <div id='leftboxContent'>
            Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. Left side content. 
        </div>
    </div>
    <div id='rightbox'>
        <div id='righttop'>Right top</div>
        <div id='rightbottom'>Right bottom</div>
    </div>

</div>

CSS

#wrapper
{
    width: 100%;
    height: 400px;
    border:1px solid black;
}

#leftbox
{
    float: left;
    width: 30%;
    height: 100%;
    overflow-y: auto;
}

#leftboxContent
{
    height: auto;
}

#rightbox
{
    width: 70%;
    height: 100%;
    float: left;
}

#righttop
{
    width: 100%;
    height: 70%;
    outline: 1px solid black;
}

#rightbottom
{
    height: 30%;
    outline: 1px solid black;
}