JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class=left></div>
    <div class=center></div>
    <div class=right></div>
</div>

CSS

html, body {
    margin: 0px;
    height: 100%;
}
.left, .right {
    display: inline-block;
    background: yellow;
    width: calc(50% - 100px);
    height: 100%;
    float: left;
}
.center {
    display: inline-block;
    background: blue;
    width: 200px;
    height: 100%;
    float: left;
}
.main{
    width:100%;
    height:200px;
    box-shadow: 0px 8px 8px -2px rgba(105, 104, 104, 0.47) inset;
}