The crazy columns

by Sam Fereday

HTML

<div class="container">
  <div class="col-4">
    <img src="http://via.placeholder.com/350x150" />
    <p>
      Wir werden den monatlichen Preis von Ihrer unten angegebenen Kreditkarte abbuchen. Wir akzeptieren MasterCard, VISA und Diners Club Card.
    </p>
  </div>
  <div class="col-4">
    <img src="http://via.placeholder.com/350x650" />
    <p>
      Ihr Owl-Vertrag kostet € 4,49 inkl. MwSt.
    </p>
  </div>
  <div class="col-4">
    <img src="http://via.placeholder.com/350x450" />
    <p>
      Sofern nicht Sie oder wir kündigen.
    </p>
  </div>
</div>

SCSS

html,
body {
  margin: 0;
  padding: 0;
  font: 85%/1.4em 'Tahoma';
}

* {
  box-sizing: border-box;
}

.container {
  padding: 1em 0;
}

.col-4 {
  width: 33.33%;
  padding: 0.5em;
  float: left;
  position: relative;
  transition: all 0.2s;
  img {
    width: 100%;
    height: auto;
  }
  p {
    padding: 0 1em 1em;
  }
}

JavaScript

let imgs = document.querySelectorAll('img');
let cols = document.querySelectorAll('.col-4');

// Find the tallest offending image to match the height to
function tallestImage(arr) {

  let max = 0,
    len = arr.length,
    i = 0;

  for (i; i < len; i++) {
    max = Math.max(arr[i].scrollHeight, max);
  }

  return max;

}

// Set heights according to parameters
function jigIt(imgs, cols) {

  let len = cols.length,
    max = tallestImage(imgs),
    i = 0;

  for (i; i < len; i++) {
    cols[i].style.minHeight = max + 'px';
    cols[i].style.paddingTop = (max - imgs[i].scrollHeight) + 'px';
  }

}

// Resize events
let resizeTimer;
window.addEventListener('resize', function(e) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    jigIt(imgs, cols);
  }, 150);
});

// Start it off
jigIt(imgs, cols);