JSFiddle - React, Tailwind, and code Playground

HTML

<div class="backgroundG" >
            <div class="section">section1</div>        
            <div  class="sectionFillUp">section2twetewtew</div>              <div class="section">section3</div>
            <div class="sectionFillUp">section4twetewtew test</div>
            <div class="section">section5</div>
    </div>

CSS

.backgroundG {
    height:44px;
    width:100%;
    background-color:#ECECEC;
    display:table-row;
}

.sectionFillUp{
    display:table-cell;
    width:50%;
    height:44px;
    overflow:hidden;
    border:1px solid black;
       vertical-align:middle;

}

.section{
   min-width:50px;
   max-width:50px;
   height:44px;
   overflow:hidden;
   display:table-cell;
   border:1px solid red;
   vertical-align:middle;
}