After spending more than an hour trying to figure it out, searching and reviewing other solutions, I still haven't been able to resolve my issue.
My problem is with 5 divs, where the third and fourth div are not stacking up as expected. Instead, the last div is stacking on top of the third div.
Check out this link for reference
Here is the HTML structure:
<div class="isotope js-isotope">
<div class="item width2 height2"></div>
<div class="item width2 height2"></div>
<div class="item width2 width2"></div>
<div class="item width2 width2"></div>
<div class="item width2 height2"></div>
</div>
And here is the JS code:
var $container = $('.isotope').isotope({
layoutMode: "masonryHorizontal",
itemSelector: ".boxes",
masonryHorizontal: { rowHeight: 360 }
});
The expected behavior was to have the divs stack up differently