JSFiddle - React, Tailwind, and code Playground

by nickpish

HTML

<div class="container cf">
    <div class="left-column">
        <div class="block one">1</div>
        <div class="block three">3</div>
        <div class="block five">5</div>
        <div class="block eight">8</div>   
    </div>
    <div class="right-column">
        <div class="block two">2</div>    
        <div class="block four">4</div>    
        <div class="block six">6</div>
        <div class="block seven">7</div>  
    </div>    
</div>

CSS

/*-------------------- clearfix --------------------- */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/*-------------------- main --------------------- */
.container {
   max-width: 960px;
   padding: 2%;
}
.left-column {
    float: left;
    width: 30%;
    margin-right: 2%;
}
.right-column {
    float: right;
    width: 67%;
}
.block {
    width: 100%;
    font-family: sans-serif;
    color: #fff;
    background-color: #7f7f7f;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    float: left;
}
.one {  
    height: 150px;
}
.two {
    height: 250px;
}
.three {  
    height: 150px;
}
.four {
    height: 250px;
}
.five {
    height: 450px;
}
.six {
    height: 350px;
}
.seven {
    height: 250px;
}
.eight {
    height: 200px;
}

/* 678 breakpoint ----------- */
@media only screen 
and (max-width : 678px) {
    .block {
        width: 100% !important;
        float: none !important;
    }
}