JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>

CSS

body {
    width:100%;
}
div {
    margin-bottom:10px;
   display:inline-block; /*Los convierte en bloques en lineas, lo que hace que al completarse una linea (de tres en tu caso, el proximo baje a la línea de abajo. El alto de la linea estaría formado por el div mas alto*/
   width: 30%; /*El ancho que tu definiste*/
   vertical-align:top; /*Para que se alineen al comienzo de la linea y no a la base (comportamiento por defecto*/
   *display: inline; /*Para que funcione en IE7, en caso de ser necesario*/
   zoom: 1;/*Para que funcione en IE7, en caso de ser necesario*/
    
}
.red {
    height:50px;
    background:red;
}
.blue {
    height:100px;
    background:blue;
}
.green {
    height:120px;
    background:green;
}