I thought this markup should work, but it I must be doing something wrong.

Question

0

Asked: June 3, 20262026-06-03T15:44:30+00:00 2026-06-03T15:44:30+00:00

I thought this markup should work, but it I must be doing something wrong.

0

I thought this markup should work, but it I must be doing something wrong. I have two divs that I want to be the same height and dynamically resize when the window is resized. One of the boxes becomes taller when the text inside the box wraps.

Edit: The two divs are side by side and I want the shorter one to resize to be the same height as the taller one. If the user has a device with a smaller screen or resizes the window to be smaller it causes the text in the to wrap in one box before the other. I want them both to remain the same height regardless of how the user changes the size of the window.

JS

$(document).ready(function () {    
    $('div.subFeaturedContainer > section').each(function() {

        var $sameHeightChildren = $(this).find('.subFeatured');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });

    });
});

HTML

<div class="subFeaturedContainer">
    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Nam vel risus mauris, id lacinia nulla</a>
    </section>

    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Donec tincidunt tellus ac dolor tristique blandit. Nam vel iaculis lorem.</a>
    </section>
</div>

CSS

.subFeatured {
width: 43.5%;
float: left;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid #b1bdbe;
padding: 2% 3% 2% 3%;
}

.subFeatured:nth-child(even) {
float: right;
}