CSS: Equal height columns

Ever have 3 columns side by side one another and you’re trying to get them all
to have their own background color that syncs in terms of height?

Here’s a little JS snippet that may
help.

$('.row[data-match-height]').each(function(){
  var self = $(this);
  self.find('.panel').height(self.height());
  $(window).on('resize', function(event) {
    var row_width = self.width();
    var panels = self.find('.panel');
    // Reset height of the panels
    panels.height('');
    var h = self.height();
    panels.each(function() {
      var panel = $(this);
      if ((row_width - panel.width()) > 40) {
        panel.height(h);
      }
    });
  });
});

Replace .panel with .yourcolumnclass and you’re good to go!