JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div id="Header">HEADER</div>
    <div id="LeftMenuContainer">
        <div id="RealLeftMenu">Left Bar of Wonderfulness</div>
        <div id="FakeLeftMenu">Left Bar of Wonderfulness</div>
    </div>
    <div id="MainContent">
        <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>

CSS

*
{
    padding: 0;
    margin: 0;
}

#Header
{
    text-align: center;
    font-size: 5em;
}
#LeftMenuContainer
{
    display: table-cell;
    white-space: nowrap;
}

#MainContent
{
    display: table-cell;
    background-color: red;
}

#FakeLeftMenu
{
    visibility: hidden;
}
#RealLeftMenu
{
    position: fixed;
    background-color: blanchedalmond;
}