JSFiddle - React, Tailwind, and code Playground

HTML

<h1>flex-basis: with flex-direction: row; (default)</h1>
<section class="flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

<h1>flex-basis: with flex-direction: column;</h1>
<section class="flex column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

CSS

h1{ font: normal 22px/2px Calibri; color: Gray; }
.flex{
    display: flex; /*flex-direction: row;*/
    border: 2px solid ForestGreen; margin: 0 0 30px 0;
}
.flex div{  
   flex-basis: 100px;
   background: OliveDrab; color: white; margin: 4px;   
}
.column{ flex-direction: column;  }