JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<ul>
    <li>Box 1</li>
    <li>Box 2</li>
    <li>Box 1</li>
    <li>Box 2</li>
    <li>Box 2</li>
</ul>

CSS

ul {
            display: flex;             /* Set the display to flex */
            flex-wrap: wrap;           /* Allow wrapping of items to new lines */
            list-style-type: none;     /* Remove bullet points */
            padding: 0;                /* Remove default padding */
            margin: 0;                 /* Remove default margin */
            width: 100%;               /* Ensure the ul takes full width */
        }

        /* Style each list item as a 50% width box */
        li {
            flex: 1 1 50%;             /* Set flex-grow, flex-shrink, and flex-basis to make 50% width boxes */
            box-sizing: border-box;    /* Include padding and border in width calculation */
            border: 1px solid black;   /* Add borders to clearly see the boxes */
            padding: 20px;             /* Add some padding for aesthetics */
            text-align: center;        /* Center align text */
        }

        /* Make the last odd item 50% instead of full-width */
        ul li:nth-of-type(odd):last-of-type {
            flex: 1 1 50%;
        }