JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="eq">Equalize</div>
<div class="col">
	Lorem ipsum dolor sit amet
</div>

<div class="col">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus sodales nibh, at sagittis purus fermentum a. Proin scelerisque augue bibendum tortor mattis, ut aliquet erat eleifend.
</div>

<div class="col">
	Maecenas faucibus sodales nibh
</div>

<div class="col">
	Maecenas suscipit ullamcorper fringilla. Proin turpis eros, gravida vitae mi a, dignissim vestibulum nisi. Vestibulum quis nibh ac sapien fermentum venenatis. Vestibulum in lorem non ipsum venenatis efficitur sit amet ut magna. Sed fringilla facilisis venenatis. Curabitur quis accumsan dui. Maecenas rutrum magna non massa ullamcorper lobortis. Quisque non ornare justo. Proin nec tortor eu tortor interdum efficitur. Nullam vitae massa at velit pulvinar facilisis. Etiam molestie tempus volutpat. Morbi interdum lacinia convallis. Praesent laoreet arcu ex, ut dapibus ex accumsan at.
</div>

<div class="col">
	Proin turpis eros, gravida vitae mi a, dignissim vestibulum nisi. Vestibulum quis nibh ac sapien fermentum venenatis. Vestibulum in lorem non ipsum venenatis efficitur sit amet ut magna.
</div>

<div class="col">
	Proin turpis eros, gravida vitae mi a, dignissim vestibulum nisi. Vestibulum quis nibh ac sapien fermentum venenatis.
</div>

<div class="col">
	Quisque vel nibh tincidunt, tincidunt diam at
</div>

<div class="col">
	Quisque vel nibh tincidunt, tincidunt diam at, suscipit nisl. Morbi ac libero at risus suscipit malesuada. Aenean non neque at est bibendum ultrices id vel enim. Integer magna lacus, fermentum vel hendrerit in, molestie eu sem. Donec ac ultricies magna, sit amet hendrerit ante. Ut lectus purus, malesuada id tempus eu
</div>

<!--<div class="col">
	hendrerit et neque. Nullam semper nisi ac purus viverra auctor. Phasellus at condimentum purus. Nullam ipsum tortor, maximus quis...

CSS

.eq{
	background-color:silver;
	height:30px;
	width:100px;
	text-align:center;
	cursor:pointer;
}
.col{
	box-sizing:border-box;
	border:1px solid red;
	width:100px;
	float:left;
}

JavaScript

$(document).ready(function(){
	
})
.on('click', '.eq', function(){
	equalize();
})

function equalize(){

	var elems = [],
		maxHeight = 0,
		$col = $('.col');
	
	$('.col').height('auto');
	
	for(i = 0; i < $col.length; i++){
		if(i % 3 === 0){
			var subArray = [];
			if(typeof $col[i] !== 'undefined'){
				subArray.push($col[i]);
			}
			if(typeof $col[i + 1] !== 'undefined'){
				subArray.push($col[i + 1]);
			}
			if(typeof $col[i + 2] !== 'undefined'){
				subArray.push($col[i + 2]);
			}
			elems.push(subArray);
		}
	}
	
	console.log(elems);
	
	$.each(elems, function(){
		var maxHeight = Math.max.apply(null, $(this).map(function(){
			return $(this).height();
		}).get());
		
		$(this).height(maxHeight);
	});

}