JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

Try resizing the window!
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
</div>

CSS

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.container {
    font-size: 0; /* This is the main point */
}

.container .box {
    font-size: 16px; /* ...and here we fix the font back */
    display: inline-block;
    width: 25%;
    border: 1px solid red;
}

@media screen and (max-width: 400px) {
    .container .box {
        display: block;
        width: 100%;
    }
}