Make columns always equal height? (Foundation 5)

Question

How to create a layout as shown in the image? The first column left and the second column right should always be the same height, depending of the first column height, using Foundation 5.

Answer 1

Foundation equalizer will make them even, but based on the longer one. http://foundation.zurb.com/docs/components/equalizer.html

you can use jQuery to do it yourself like this (this can work with many columns, and with any column as the one determining the size:

$(document).ready(function() {
  sizeRow();

  function sizeRow() {
    var $col = $('.sizeRow .size-by-me');
    var height = $col.height();
    $col.siblings('.size-me').height(height);
  }
});

.small-6 {
  float: left;
  width: 50%;
}
.col1 {
  height: 400px;
  background-color: #F00;
}
.col2 {
  height: 200px;
  background-color: #FF0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
  <div class="small-6 columns size-by-me col1">Column 1</div>
  <div class="small-6 columns col2 size-me">Column 2</div>
</div>