JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<ul class="row">
        <li class="col-6">Box 1</li>
        <li class="col-6">Box 2</li>
        <li class="col-6">Box 3</li>
        <li class="col-6">Box 4</li>
        <li class="col-6">Box 5</li>
    </ul>

CSS

.row {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         list-style-type: none;
         padding: 0;
         margin: 0;
       }


       .col-6 {
         flex: 0 0 calc(50% - 10px);
         max-width: calc(50% - 10px);
         box-sizing: border-box;
         border: 1px solid black;
         padding: 20px;
       }