JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>    
    <br class="clear" />
</div>

CSS

.wrapper div { background:#eeeeee; float:left; width:40%; margin:2% 5%; margin-bottom:20px; }

.one { height:80px; }
.two { height:150px; }
.three { height:80px; }
.four { height:100px; }
.five { height:70px; }

.wrapper { width:80%; margin: 0 auto; border:1px black solid; }

.clear { clear:both; }

JavaScript

$(function() {
    var div = $('div').not('wrapper');    
    div.each(function(index,el) {
        var height = $(this).outerHeight();
        div.eq(index).append( "div" + index + "<br /> height: "+ height + "px" );
        
        offset = div.eq(index).offset().top - div.eq(index-2).offset().top;
        div.eq(index).append( "<br /> distance = " + offset + "px" );
        
    });
});