JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<ul class="list">
  <li>All we have to do now</li>
  <li>Is take these lies and make them true somehow</li>
  <li>All we have to see</li>
  <li>Is that I don't belong to you</li>
   <li>And you don't belong to me yea yea</li>
   <li>And you don't belong to me yea yea</li>
   <li>And you don't belong to me yea yea</li>
</ul>

CSS

ul {height:100px;overflow:auto}
li {background: #ddd;width:50%; float:left; list-style:none;margin-bottom:50px}

JavaScript

var verticalDim = 0;
$('.list li').each(function(i){
 var bottomSpace = parseInt($(this).css('margin-bottom'));
	if(i % 2 !== 0 && i < 4) {
  	 verticalDim += Math.max($(this).height(), $(this).prev().height()) + bottomSpace;
  }
  if(i == 3)  {
  	verticalDim -= bottomSpace;
  }
});

if ($('.list').height() < verticalDim) {
	$('.list').height(Math.ceil(verticalDim));
}