JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">
<div class="bigger"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
</div>

CSS

.bigger {
    height: 40px;
    width: 308px;
    margin: 0 4px 4px 0;
    background: red;
    float: left;
}

.smaller {
    height: 60px;
    width: 100px;
    margin: 0 4px 4px 0;
    background: blue;
    float: left;
}

.outside {
    width: 324px;
}