equalHeight

by tripcollor

HTML

<div class="item coral">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="item orange">
  <p>Lorem</p>
</div>
<div class="item orange">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus reiciendis nostrum sapiente expedita! Veritatis eligendi quidem perspiciatis.</p>
</div>
<div class="item coral">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus reiciendis nostrum sapiente expedita! Veritatis eligendi quidem perspiciatis possimus repellendus nemo quod, cupiditate enim esse nesciunt voluptates illo et iure aspernatur.</p>
</div>
<div class="item coral">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus reiciendis nostrum sapiente expedita! Veritatis eligendi</p>
</div>
<div class="item orange">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus reiciendis nostrum sapiente expedita! Veritatis eligendi quidem perspiciatis possimus repellendus nemo quod, cupiditate enim esse nesciunt voluptates illo et iure aspernatur.</p>
</div>

CSS

.item{
  float: left;
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}
.coral{
  background: coral;
}
.orange{
  background: orange;
}

JavaScript

function equalHeight(items) {
  function conversionHeight() {
    var maxHeight  = 0;
    for(i = 0; i < items.length; i++){
      items[i].style.height = 'auto';
      var height = items[i].clientHeight;
      if(height > maxHeight){
        maxHeight = height;
      }
    }
    for(i = 0; i < items.length; i++){
      items[i].style.height = maxHeight + 'px';
    }
  }
  window.addEventListener('load', conversionHeight);
  window.addEventListener('resize', conversionHeight);
  conversionHeight();
}

equalHeight(document.querySelectorAll('.item'));