JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="app">
        <div id="sidebar">
            <div id="menu" class="sidebar-section">
                <ul>
                    <li id="questions">Profile</li>
                    <li id="settings">Settings</li>
                </ul>
            </div>
        </div>
        <div id="content">
        </div>
    </div>
</body>

CSS

body, html {
    background: #D8D8D8;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

#sidebar {
    width: 20%;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #C8C8C8;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar ul li {
    padding-left: 20px;
    height: 60px;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    font-size: 12pt;
    line-height: 60px;
    vertical-align: middle;
}

#sidebar ul li:hover {
    background: #c0c0c0; 
    color: #EEE;
}

#content {
    width: 80%;
    position: absolute;
    z-index: 100;
    left: 20%;
    top: 0;
    bottom: 0;
    padding: 0 50px;
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}