JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<h1>Equal heights with JavaScript</h1>

<div class="red-2">
dfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsdfdfsdfsd</div>
<div class="red-2">dfsdfsdf</div>
<div class="red-2">dfsdfsdf</div>
<div class="red-2">dfsdfsdf</div>
<!--  -->
<div class="red-3">fsdf</div>
<div class="red-3">fsdf</div>
<div class="red-3">fsdf</div>
<div class="red-3">fsdf</div>

CSS

div[class^='red-']{
    width:100px;
    float:left;
    word-wrap:break-word;
    padding:10px;
    margin:10px;
}
.red-3{
    background-color:blue;
}
.red-2{
    background-color:red;
}

JavaScript

$.fn.test = function(){
    //get elements
    var elements = [];
    $(this).each(function(){
		elements.push(this)
	});
    //get elements with same name and marge them
    //ex. red-1,red-1,red-1,red-2,red-2,red-2
    //will be
    //red-1, red-2
    
    //equalize each emelemt separately
    var max_height = 0;
    $(elements).each(function(){
		max_height = Math.max($(elements).height(), max_height);
	});
	$(elements).each(function(){
		$(elements).height(max_height);
	});
    console.log(elements);
};

$("div[class^='red-']").test();