JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="block">
    <div class="item">
        1
    </div>
    <div class="item">
        2
    </div>
    <div class="item">
        3
    </div>
    <div class="item">
        4
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.block {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: red;
}

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50%;
    max-width: 50%;
    height: 60px;
    border: 1px solid #fff;
    background-color: green;
}