How to ensure three DIV are the same height regardless of content

Answer 1

Are Flexbox or jQuery possibilities? As others have mentioned the only pure CSS way (at the moment) is via table-cell which I'm not a huge fan of.

If jQuery is possible there's a fairly simple script I use to make heights match:

CSS:

.item{
  float: left;
  width: 280px;
}

jQuery:

// Set 'x' number of items to the tallest height
var tallestBox = 0;

$(".item").each(function() {
  var divHeight = $(this).height();

  if (divHeight > tallestBox){
    tallestBox = divHeight;
  }
});

// Apply height & add total vertical padding
$(".item").css("height", tallestBox + 30);

Or if Flexbox is possible (modern browsers) this is crazy easy now:

CSS:

.contain{
  display: flex;
  flex-direction: row;
}