JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="leftdiv"></div>
    <div class="maindiv">
        //Panel bar is inside this div.
        <br />long text
        <br />some text
        <br />hello
        <br />world //Panel bar is inside this div.
        <br />long text
        <br />some text
        <br />hello
        <br />world</div>
    <div class="rightdiv"></div>
</div>

CSS

*{margin:0;padding:0;}
.container{display:flex;align-items:stretch;flex-flow:row wrap;}
.leftdiv{background:#DE7D7D;}
.rightdiv{background:#35E62B;}
.maindiv{background:#E7E77C;}
.leftdiv,.rightdiv,.maindiv{flex:1 0;}