JSFiddle - React, Tailwind, and code Playground
HTML
<p>Click on here to animate each div, depending on its height</p>
<div class="item0">default</div>
<div class="item0">default</div>
<div class="item0">default</div>
<div class="item0 half">smaller height, same default distance</div>
CSS
.item0 {
background-color: red;
height: 50px;
float: left;
margin-left: 5px;
position: relative;
padding: 5px;
}
.half {
height: 10px;
background-color: yellow;
}
JavaScript
$('p').click(function () {
$('.item0').each(function() {
var height = $(this).outerHeight();
$(this).animate({top:height}, 300);
});
});