JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="d_1" id="d1">1</div>
    <div class="d_2" id="d2">2</div>
    <div class="d_3" id="d3">3</div>
    <div class="d_4" id="d4">4</div>
    <div class="d_5" id="d5">5</div>
    <div class="d_6" id="d6">6</div>
    
</div>

CSS

#wrapper{
    width:200px;
    
}
#wrapper div{
    background-color:lightgray;
    width:50px;
    position:relative;
    
    margin:0px 5px 5px 0px;
}
.d_1{
    height:60px;
}
.d_2{
    height:30px;
}
.d_3{
    height:33px;
}
.d_4{
    height:70px;
}
.d_5{
    height:60px;
}
.d_6{
    height:40px;
}

JavaScript

var d1 = document.getElementById('d1');
var d1Loc = d1.getBoundingClientRect();
var d2 = document.getElementById('d2');
var d2Loc = d2.getBoundingClientRect();
var d3 = document.getElementById('d3');
var d3Loc = d3.getBoundingClientRect();
var d4 = document.getElementById('d4');
var d4Loc = d4.getBoundingClientRect();
var d5 = document.getElementById('d5');
var d5Loc = d5.getBoundingClientRect();
var d6 = document.getElementById('d6');
d2.style.left = d1Loc.right -5+ "px";
d2.style.top = - d1.offsetHeight - 5 + "px";
d3.style.left = d2Loc.right + d1Loc.right -10 +"px";
d3.style.top = - d1.offsetHeight - d2.offsetHeight - 10 + "px";
d4.style.top = - d1.offsetHeight - d2.offsetHeight - d3.offsetHeight + 50 + "px";
d5.style.top =  - d1.offsetHeight - d2.offsetHeight - d3.offsetHeight - d4.offsetHeight + 15 + "px";
d6.style.top = - d1.offsetHeight - d2.offsetHeight - d3.offsetHeight - d4.offsetHeight - d5.offsetHeight +12.5 + "px";
d5.style.left = d4Loc.right  -5+ "px";
d6.style.left = d5Loc.right + d4Loc.right -10 + "px";