JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <p>wrapper</p>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <p>wrapper</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
#wrapper {
    background: rgba(200, 200, 200, 0.6);
    height: 100%;
}
#sidebar {
    background: rgba(200, 200, 200, 0.6);
    float: left;
    height: 50%;
    width: 100px;
}
#content {
    background: rgba(200, 200, 200, 0.6);
    height: 50%;
    margin-left: 100px;
}