JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="foo">foo
        <h1>heading</h1>
    </div>
    <div id="bar">bar</div>
</div>

CSS

#main{
    display: table-row;
    background: gray;
    /* position: relative; */
}

#main > div{
    display: table-cell;
    width: 500px;
    height: 300px;
}
#main #foo{
    width: 20%;
}
#foo h1{
    background: #fff;
}
#bar{
    width: 80%;
    background: yellow;
    box-shadow: -5px 0 11px #000;
}