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;
    transform: translate3d(0, 0, 0);
}
#main #foo {
    width: 20%;
}
#foo h1 {
    background: #fff;
}
#bar {
    width: 80%;
    background: yellow;
    box-shadow: -5px 0 11px #000;
}