Set Equal height on window resize not working

Question

I able to set equal height of all item in a row using jQuery code. . but IDK why its not working on window resize. this is very important for tab and mobile view . Here is my code

jQuery( document ).ready(function($) {
  function eq_height(){  
  var content = $('div.item');

    content.each(function() {
   var maxheight = 0;
        if(maxheight < $(this).siblings().outerHeight()){
              maxheight = $(this).siblings().outerHeight()
         $(this).siblings().height(maxheight)
        };
  });
}
eq_height();

$(window).resize(eq_height); //this part is not working. 


});

.wrapper{
  margin-bottom:30px;
}
.wrapper .item {
    display: inline-flex;
    max-width: 30%;
    background: #ddd;
    margin-right: 1%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi nisi. explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi nisi</div>
<div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
<div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cupiditate officiis! Ut, labore?</div>
</div>
<div class="wrapper">

  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima</div>
<div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
<div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cdupiditate officiis! Ut, labore?</div>
</div>

codepen Thanks in advance

Answer 1

Is this what you were after?

let maxheight = 0
content.each(function() {
  maxheight = Math.max(maxheight, $(this).height())
});
$('div.item').css('height', maxheight + "px")

jQuery(document).ready(function() {
  function eq_height() {
    var content = $('div.item');
    let maxheight = 0
    content.each(function() {
      maxheight = Math.max(maxheight, $(this).height())
    });
    //console.log(maxheight)
    $('div.item').css('height', maxheight + "px")
  }
  eq_height();

  $(window).resize(eq_height);
  $(document).ready(eq_height);

});

.wrapper {
  margin-bottom: 30px;
}

.wrapper .item {
  display: inline-flex;
  max-width: 30%;
  background: #ddd;
  margin-right: 1%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi nisi. explicabo voluptatum minima similique soluta magnam aperiam aliquid ipsam commodi
    nisi
  </div>
  <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cupiditate officiis! Ut, labore?</div>
</div>
<div class="wrapper">

  <div class="item">Lorm ipsum, dolor sit amet consectetur adipisicing elit. Harum maiores repellendus explicabo voluptatum minima</div>
  <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, accusamus?</div>
  <div class="item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi ratione nisi cdupiditate officiis! Ut, labore?</div>
</div>