JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<section class="c100">1</section>

<section class="c50">1</section>
<section class="c50"></section>

<section class="c50">1</section>
<section class="c10">1</section>
<section class="c20">1</section>
<section class="c20">1</section>

<section class="c33 clear">1</section>
<section class="c66">1</section>

<section>1</section>
<section>1</section>
<section>1</section>

CSS

section,.colon { padding:0.5%; margin-left:0.5%; float:left; margin-top:0.5%; background:pink; }
.c100 { width:98.4%; min-height:128px; }
.c75 { width:73.4%; min-height:96px; }
.c66 { width:64.70%; min-height:84px; } /* 66.66 */
.c60 { width:58.4%; min-height:84px; }
.c50 { width:48.4%; min-height:72px; }
.c40 { width:38.4%; min-height:64px; }
.c33 { width:31.73%; min-height:60px; } /* 33.33 */
.c30 { width:28.4%; min-height:60px; }
.c25 { width:23.4%; min-height:45px; }
.c20 { width:18.4%; min-height:45px; }
.c10 { width:8.4%; min-height:45px; }
.clear { clear:left; }
/*
@media screen and (max-width: 640px) {
    .c10 {  width:18.4%; min-height:45px; }
    .c20, .c30, .c25 { width:38.4%; min-height:64px; }
}*/

JavaScript

function refreshColon(){
    var l = 0, $t = $(), $line = $(), max = 0;
    $("section").each(function(){
        $t = $(this);
        var o = $t.offset();
        if(l != o.top){
               $line.height(max);
               l = o.top; max = $t.height();
               $line = $t;
        } else {
                var h = $t.height();
                if(max < h) max = h;
                $line = $line.add($t);
        }
    });
}

$(window).on('resize',refreshColon).resize();