JSFiddle - React, Tailwind, and code Playground

HTML

Desired:
<img src="http://i.imgur.com/uV151f0.png">
Actual:
<div style="display: inline-block">
<div class='blue' style='width: 110px'>
    <div class='red'></div>
    <div class='red'></div>
</div>

<div class='blue' style='width: 110px'>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
</div>

<div class='blue' style='width: 170px'>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
</div>
    
</div>

CSS

.blue {
    margin-top: 10px;
    background-color: #00A2E8;
    height: auto;
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
}

.red {
    background-color: red;
    width: 50px;
    height: 50px;
    float: left;
    margin-top: 10px;
    margin-right: 10px
}

body * {
    vertical-align: top
}

img {
    margin-right: 50px;
}