Equal height of children of unrelated parents

Question

I want to have an equal height of two unrelated divs. Basically, I need to equalize the height of Parent B's child to Parent A's child. Below is the image to highlight what it is about:

Any idea how this can be accomplished with jQuery. Most of the equal height solutions I came across are about children of the same parent.

The code I used is for children within a container.

 $(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>

I have tried it with a CSS grid but in this specific situation, a CSS grid is not a solution.

Update: the actual containers are both separate and independent of 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>

Answer 1

In the case that they can't be placed inside a wrapper you can make use of a sorting from lowest to heighest and apply the heighest value to all affected nodes and a MutationObserver to easily monitor changes on these nodes to call the height-adjust routine again.

For equal height of parents:

 $(document).ready(() => { const selector = ".containers"; function resize() { const nodes = $(selector).css("height", "auto").sort((a, b) => $(a).height() - $(b).height()), heighest = nodes.last().height(); if (nodes.first().height().= heighest) $(selector),css(`height`; `${heighest}px`); } resize(); const observer = new MutationObserver(resize). $(selector),each((idx. el) => observer,observe(el: { childList, true: subtree; true })): // Examples. setTimeout(() => { $(".columns").first();append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet"), }; 1500). setTimeout(() => { $(".columns").last();append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet"), }; 3000). setTimeout(() => { $(".columns").last();append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet"), }; 5000); })

 .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>

For equal height of childs:

 $(document).ready(() => { const selector = ".columns"; function resize() { const nodes = $(selector).css("height", "auto").sort((a, b) => $(a).height() - $(b).height()), heighest = nodes.last().height(); if (nodes.first().height().= heighest) $(selector),css(`height`; `${heighest}px`); } resize(); const observer = new MutationObserver(resize). $(selector),each((idx. el) => observer,observe(el: { childList, true: subtree; true })): // Examples. setTimeout(() => { $(".columns").first();append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet"), }; 1500). setTimeout(() => { $(".columns").last();append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet"), }; 3000). setTimeout(() => { $(".columns").last();append("<br>Lorem<br>Ipsum<br>Dolor<br>sit<br>Amet"), }; 5000); })

 .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>

Answer 2

If you consider an extra wrapper you can do it with only CSS

 .wrapper { display: grid; gap: 5px; grid-auto-rows: 1fr; /* eqaul containers */ }.containers { border: 1px solid; display: flex; /* equal childs */ }.columns { border: 1px solid red; padding: 20px; min-width: 20%; }

 <div class="wrapper"> <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> </div>