JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float_left">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>
<div class="box unique">3</div>
<div style="clear: both;"></div>
<div class="float_left">
    <div class="float_left2">
        <div class="box">6</div>
        <div class="box">9</div>
    </div>
    <div class="box unique">7</div>
</div>
<div class="box">8</div>

CSS

div.box {
    box-shadow: 0 0 1px black inset;
    height: 100px;
    float: left;
     width: 100px;
    background-color: #0f0;
}

.float_left {
    float: left;
    width: 200px;
}

.float_left2 {
    float: left;
    width: 100px;
}

.unique {
    background-color: #00f !important;
    height: 200px !important;
    color: #fff;
}