JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer"><!--
 --><div class="rest"></div><!--
 --><div class="center"></div><!--
 --><div class="rest"></div><!--
--></div>

CSS

div {
    height: 20px;
}
div.outer {
    width: 100%;
}
div:not(#outer) {
    display: inline-block;
    float: left;
}
div.center {
    width: 300px;
    background-color: black;
}
div.rest {
    width: calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: -o-calc(50% - 150px);
    width: -moz-calc(50% - 150px);
    background-color: grey;
}