JSFiddle - React, Tailwind, and code Playground

by Eduardo GarcĂ­a Sanz

HTML

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

CSS

div.a {
    float: left;
    padding: 10px;
    width: 160px;
    border: 1px solid #000;
    background-color: #CFE2F3;
}

div.b {
    border: 1px solid #000;
    background-color: #D9EAD3;
}

div.c {
    border: 1px solid #000;
    background-color: #FCE5CD;
}

div.a:nth-child(1) > div.b {
    height: 50px;
}

div.a:nth-child(1) > div.c {
    height: 50px;
}

div.a:nth-child(2) > div.b {
    height: 200px;
}

div.a:nth-child(2) > div.c {
    height: 50px;
}

div.a:nth-child(3) > div.b {
    height: 150px;
}

div.a:nth-child(3) > div.c {
    height: 100px;
}

div.a + div {
    margin-left: 10px;
}

JavaScript

var margin = 10;
var minHeight = 250 + margin;
var as = document.querySelectorAll('div.a');
var i;

for(i = 0; i < as.length; i++) {
    
    var height = minHeight - as[i].offsetHeight;
    var x = as[i].querySelectorAll('div.b')[0];
    
    x.style.marginBottom = Math.max(margin, height) + 'px';
}