Is there a way to make two unrelated divs have the same height using jQuery? Most solutions I found are for children of the same parent, but in this case, I need to equalize the heights of Parent B's child to Parent A's child. The code snippet below attempts to achieve this:
https://i.sstatic.net/zIzIT.png
I tried using a CSS grid but it did not work for this specific scenario.
Update: Both containers (Parent A and Parent B) are separate and independent from each other:
.a, .b {border:2px solid; padding: 25px; float:left; width: 200px;}
.a div, .b div {border:2px solid red;}<div class="a">Parent A
<div>Child of A <br> some additional text</div>
</div>
<div class="b">Parent B
<div>Child of B</div>
</div>The JavaScript code snippet provided aims to adjust the height of columns within their respective containers to ensure equal heights:
$(document).ready(function(){
$('.containers').each(function(){
var min_highestBox = 0;
$('.columns', this).each(function(){
if($(this).height() > min_highestBox) {
min_highestBox = $(this).height();
}
});
$('.columns',this).height(min_highestBox);
});
});.containers {border:1px solid; width:100%; display:inline-block;}
.columns {border:1px solid red; padding: 20px; min-width:20%; float:left;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
<div class="columns">This is<br />the highest<br />column</div>
<div class="columns">One line</div>
<div class="columns">Four<br />lines<br />the highest<br />column</div>
</div>
<div class="containers">
<div class="columns">One line</div>
<div class="columns">Two<br>lines</div>
<div class="columns">One line</div>
</div>