JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div id="Site">
        <div id="header">HEADER</div>
        <div id="content">
            <div id="left_bar">Left Bar of Wonderfulness</div>
            <div id="main_content">
                <p>I want this content to be displayed right around <b>here</b>. So it doesn't scroll behind "Left Bar of Wonderfulness". Though, I don't want to use absolute positioning because I need my page to automatically format itself based on the size of the viewport. Also, the Left Bar isn't going to be a fixed width anyway. That'll be dependant on a number of things and may change multiple times during the same session. So absolute positioning is out of the question.</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
            </div>
        </div>
    </div>

CSS

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

#Site
{
    height: 100%;
}
    #Site:before
    {
        content: '';
        height: 100%;
        float: left;
    }


#header
{
    text-align: center;
    font-size: 10vw;
}
#content
{
    background-color: azure;
    position: relative;
}
    #content:after
    {
        content: '';
        display: block;
        clear: both;
    }
#left_bar
{
    width: 30%;
}
#main_content
{
    position: absolute;
    height: 100%;
    width: 70%;
    top: 0;
    right: 0;
    background-color: red;
    overflow: auto;
}