JSFiddle - React, Tailwind, and code Playground

HTML

<h1>flex-grow:</h1>
<section class="flex">
    <div>1</div>
    <div>2</div>
    <div class="grow">3</div>
    <div>4</div>    
</section>

CSS

h1{ font: normal 22px/2px Calibri; color: Gray; }
.flex{
    display: flex; 
    border: 2px solid ForestGreen; margin: 0 0 30px 0;
}
.flex div{  
   flex-basis: 50px;
   background: OliveDrab; color: white; margin: 4px;   
}
.grow{ flex-grow: 3; }