JSFiddle - React, Tailwind, and code Playground

by Divy Shah

HTML

<div class="container">
  <div class="side">Left</div>
  <div class="middle">.</div>
  <div class="side">Right</div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.container {
    display:table;
    width:100%;
    height:10px;
    table-layout:fixed;
}
.side, .middle {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
.middle {
    width:500px;
    background:black;
}
.side {
    width : calc(50% - 500px);
    overflow:hidden;
    background:chocolate;
}

@media (max-width: 500px) {
    .side
    {
        display:none;
    }
    .middle
    {
        width:100%;
    }
}