JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout">
    <div class=" span-6 break">
        <div class="item"></div>
    </div>
    <div class=" span-3">
        <div class="item"></div>
    </div>
    <div class=" span-3 divide">
        <div class="item"></div>
    </div>
    <div class=" span-2">
        <div class="item"></div></div>  
    <div class=" span-2">
        <div class="item"></div></div>
    <div class=" span-2 break">
        <div class="item"></div></div>
    <div class=" span-2">
        <div class="item"></div></div>
    <div class=" span-2">
        <div class="item"></div></div>  
</div>

CSS

.layout {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-content: flex-start;
    background-color: #EDF;
    width: 240px;
    margin-left: 240px;
    -webkit-box-sizing: border-box;
}
.layout > * {
    margin-left: -240px;
    float: left;
    -webkit-flex: none;
    -webkit-box-sizing: border-box;
    padding: 0 10px;
}
.item {
    min-height: 100px;
    background-color: #EEE;
}
.item + .item {
    margin-top: 20px;
}
.break {
    clear: right;
}
.span-2 {
    width: 33.3333333333%;
}
.span-3 {
    width: 50%;
}
.span-6 {
    width: 100%;
}
.span-6 .item {
    min-height: 300px;
} 

.divide ~ * {
    margin-left: 0;
    -webkit-flex: 0 0 auto;
}

.divide ~ .break ~ * {
    -webkit-align-self: flex-start;
}

.divide ~ * > .item {
    background-color: #fed;
}