JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="box-wrapper">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </div>

CSS

#box-wrapper { display: flex; flex-direction: row; width: 100%; height:200px; border: 1px solid #000; justify-content: center; flex-wrap: wrap; }
#box-wrapper > div { border: 1px solid green; width: calc(40% - 4px); }

#box-wrapper > div:nth-child(2) {
    margin-left: calc(100% - 40%);
}