JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="first">
        <button>A</button>
        <button>B</button>
        <button>C</button>
    </div>
    <div id="second">
        FILL REST OF SPACE
    </div>
    <div id="third">
        <button>E</button>
        <button>F</button>
        <button>G</button>
        <button>H</button>
    </div>
</div>

CSS

#wrapper{
    height: 30px;
}

#first{
    height: 100%;
    background-color:red;
    float: left;
    display: inline-block;
}

#second{
    height: 100%;
    background-color:green;
    display: inline-block;
}

#third{
    height: 100%;
    background-color:yellow;
    float: right;
    display: inline-block;
}