Data-Equalizer Foundation 5 not working

Question

I tried to use these data-equalizer on the foundation framework to be able to have the same height for each column and, from that, be able to center vertically a text in this column.

Here is the HTML:

    <div class="row" data-equalizer>
<div class="small-2 columns" data-equalizer-watch style="background: #ff0000;">   
    <span>Monday:</span>
</div>
<div class="small-5 columns" data-equalizer-watch>
    <label>Start Time
        <input type="text" class="time start ui-timepicker-input" autocomplete="off" alt="{{timestampStart}}">
    </label>
</div>
<div class="small-5 columns" data-equalizer-watch>
    <label>End Time
        <input type="text" class="time end ui-timepicker-input" autocomplete="off" alt="{{timestampEnd}}">
    </label>
</div>

I also created a JSFiddle in order that you can see what I meant --> I want that the red background of the "Monday" goes until the end of the row.

Thanks for help.

Answer 1

Working version here: Fiddle

Make sure you include the Foundation equalizer script and initialise Foundation on page load.

$(document).foundation();