JSFiddle - React, Tailwind, and code Playground

HTML

<div id="App">
            <div id="AppFrame">
                <div id="AppMenu">
                    <div id="AppMenuContent">test</div>
                    <div id="AppMenuLog">test</div>
                </div>
                <!--<div id="AppDisplay">
                    test
                </div>-->
            </div>
        </div>

CSS

html, body{
                height: 100%;
                margin-left: 0px;
                margin-top: 0px;
                margin-bottom: 0px;
                
                background-color: #ebebeb;
                font-family:Helvetica;
            }
            #App{
                height: 100%;
                display: table;
                margin-left: 0px;
                margin-top: 0px;
            }
            #AppFrame{
                display: table-row;
                height: 100%;
                margin-top: 0px;
            }
            #AppMenu{
                height: 100%;
                width: 300px;
                margin-top: 0px;
                display: table-cell;               
            }
            #AppMenuContent{
                max-width: 65px;
                height: 100%;
                background-color: red;
                float:left;
            }
            #AppMenuLog{
                margin-left: 65px;
                width: 200px;
                float:left;
                height: 100%;
                background-color: #999999;               
            }
            #AppDisplay{
                display: table-cell;
                height: 100%;
            }