Dynamic changing height to tallest div on window resize

Question

I am trying to use jQuery to set a set of div to the heigh of the tallest div. I have got the initial function working, where it gets the site and applies it to the rest of the divs on the page.

I also am trying to recalculate the heigh of the div in resize. In the JSfiddle, you can see that when you shrink the text expands out of the card/div.

I have tried to put the function into the resize function however in doesn't re-fire. I'm not sure what i am doing wrong.

I'm a JS beginner, apologies.

HTML

    <div class="fluid-container grey-bg">
        <div class="container">

            <div class="card-default width-25 items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
                </div>
            </div>

            <div class="card-default width-25 spacer items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste 
                </div>
            </div>

            <div class="card-default width-25 spacer items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
                </div>
            </div>

            <div class="card-default width-25 items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam 
                </div>
            </div>
        </div>
    </div>

CSS

.card-default {
     background-color: #fff;
     border-radius: 10px;
     color: #333333;
     min-height: 100px;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
     padding: 20px 0px;
     text-align: center;
     margin-bottom: 20px;
     display: block;
     float: left;
     position: relative;
     width: 100%;
}

.card-default.width-25 {
     width: 23%;
     margin-left: 0px;
     margin-right: 0px;
     padding: 20px 20px;
}

JS

function cardEqualHeight() {
    var maxHeight = -1;

    $('.items').each(function() {
        maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
    });

    $('.items .content').each(function() {
        $(this).height(maxHeight);
    });
}
cardEqualHeight();

https://jsfiddle.net/k3lh4m/7wmfox9m/

Answer 1

Add this to the containter class and don't use your JS function and there you go!

.container {
    display: flex;
    flex-wrap: wrap;

}

jsfiddle