JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
</div>

CSS

* { margin: 0; padding: 0; }
.parent {
    width: 100%;
    background: red;
}

.child {
    width: 10%;
    height: 10%;
    background: blue;
    float: left;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}

JavaScript

$(function() {
    $(window)
        .resize(function() {
            var w = $(document).width();
            $('.parent').height(w);
        })
        .trigger( 'resize' );
    
});