JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
        <div id="left"></div>
        <div id="center1">asdfasdfasdf</div>
        <div id="center2"> asdfasdlfkjasl;dkfjalsdjkf</div>
        <div id="right"></div>
    </div>

CSS

div {
        border: solid 1px black ;
        height: 20px;
        background-color: blue;
    }

    #foo {
        border: none; 
        display: table; 
        width: 100%;
    }

    #left, #right {width: 100px;}

    #foo > div {
        display: table-cell;
    }