JSFiddle - React, Tailwind, and code Playground

by Virtual

HTML

<div style="width:80%;border:1px solid #0f0">
<div class="upper">
    <div class="t1">aaa<br/>aaa</div>
    <div>aaa</div>
    <div>aaa<br/>aaa</div>
    <div>aaa<br/>aaa<br/>aaa</div>
    <div>aaa</div>
    <div class="t2">aaa</div>
</div>

<div class="upper mc">
    <div>aaa<br/>aaa</div>
    <div>aaa</div>
    <div>aaa<br/>aaa</div>
    <div>aaa<br/>aaa<br/>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
</div>

</div>

CSS

.upper
{
    margin:0px;
    display:flex;
    flex-direction:row;
    width:100%;
    height:80px;
    border:1px red solid;
    
    padding:5px; /* this */
}

.upper > div
{
    flex:1 1 auto;
    border:1px red solid;
    text-align:center;
    
    margin:5px;  /* and that, will result in a 10px gap */
}

.upper > div.t1 { margin-left:0;padding:0;}
.upper > div.t2 { margin-right:0;padding:0;}

.upper.mc
    {flex-direction:column;flex-wrap:wrap;width:100%;height:200px;}