JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    /* We first create a flex layout context */
    display: flex;
    /* Then we define the flow direction and if we allow the items to wrap */
    flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
    
    border: 1px solid #999999;
}
.test > div {
    margin: 10px;
    padding: 20px;
    background-color: #FF0000;
}