JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"> </script>
</head>
<body>
<div class='parent'>
<div class='parent1' id="a1">1</div>
<div class='parent1 extra-height' id="a2" class="">2</div>
<div class='parent1 extra-height' id="a3" class="">3</div>
<div class='parent1' id="a4">4</div>
<div class='parent1' id="a5">5</div>
<div class='parent1' id="a6">6</div>
<div class='parent1' id="a7">7</div>
</div>
</body>
</html>
CSS
*{
margin:0px;
padding:0px;
}
.parent div
{
background: #000;
color: #fff;
font: 40px Tahoma, Verdana, Sans-Serif;
height: 100px;
/*margin: 10px;*/
text-align: center;
width: 100px;
display: inline-block;
border : 2px solid red;
box-sizing: border-box;
position:relative;
}
.parent{
min-width: 200px;
}
div.extra-height
{
height: 200px;
}
#a1{
height: 70px;
}
#a4{
height: 62px;
}
#a5{
height: 300px;
}
#a6{
height: 45px;
}
#a7{
height: 85px;
}
JavaScript
$(document).ready(function () {
$(window).resize(function () {
rez()
});
function rez() {
var childLength = $(".parent").children().length;
var children = $(".parent").children();
// var parentWidth = parseInt($(".parent").width());
var offsetsArray = [];
for (var i = 0; i < childLength; i++) {
$(children[i]).css({'top': '0px'});
}
for (var i = 0; i < childLength; i++) {
offsetsArray.push($(children[i]).offset().left);
}
for (var i = 0; i < offsetsArray.length; i++) {
for (var j = (i + 1); j < offsetsArray.length; j++) {
if (offsetsArray[i] == offsetsArray[j]) {
var elements = $('.parent').children().filter(function () {
return this.offsetLeft == offsetsArray[i];
});
changePosition(elements);
break;
}
}
}
}
function changePosition(elements) {
for (var i = 0; i < elements.length-1; i++) {
var height = $(elements[i]).outerHeight() + $(elements[i]).offset().top;
var element = $(elements[i+1]).offset().top;
if (((element - height) > 5)) {
$(elements[i+1]).css({ 'top': -(element-(height)) +'px' });
}
}
}
rez()
});