JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div id="container">

<input type="button" value="Trykk for å sette lik høyde" id="btn"/>

<div class="equal">
    Dette er en kolonne med lite tekst.
</div>

<div class="equal">
    Dette er en kolonne med middels tekst.
    Dette er en kolonne med middels tekst.
    Dette er en kolonne med middels tekst.
    Dette er en kolonne med middels tekst.
</div>

<div class="equal">
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    Dette er en kolonne med mye tekst.
    
</div>

</div>

CSS

#btn {position: relative; display: block; margin: 5px 0 20px 5px;}

.equal {position: relative; float: left; width: 150px; background: pink; margin: 10px; height: auto;}

JavaScript

$.fn.setToMax = function(){
    return this.height(Math.max.apply(this, $.map(this, function(e){return $(e).height()})));
}
                                                    
$("#btn").on('click', function() {
    $(".equal").setToMax();
})