JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: clamp(20px, 10vh, 120px);
}

.item {
    flex: 1;
    flex-basis: calc(33.33% - 2em);
    box-sizing: border-box;
    background: lightgrey;
    text-align: center;
}

@media (max-width: 700px) {
    .item {
        flex-basis: calc(50% - 2em);
    }
    .item:nth-of-type(3) {
        flex-basis: 100%;
    }
}