Zurb Foundation 5 Equalizer Across Columns - zurb-foundation-5

Question

I have a 3 column row. On each column I have a thumbnail div, a title div and a details div. I am able to use Equalizer to make all the columns have the same height but what I would like to do is to have all the title divs to be of equal height across the same row so everything can line up nicely.
I have created a codepen and a screenshot. Any help would be appreciated.
http://codepen.io/renny/pen/VLNZRx
<div class="row">
<div class="small-12 medium-12 columns">
<div class="row" data-equalizer="row1">
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</div>
<div class="title">
Event Banana
</div>
<div class="details">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</div>
<div class="title">
Monday Event Number 2, with quite a long title, let's see how we manage to make it fit
</div>
<div class="details">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
</div>
<div class="title">
Voluptatem vel facere illum quaerat similique deleniti
</div>
<div class="card-content">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>
Thanks!

Answer 1

Put an equalizer attrib on the main div and watch on individual title divs like so (omitting most of your code for brevity):
<div class="row" data-equalizer="title"> <-- this is your main div just before the first small-12
...rest of your code goes here
<div class="title" data-equalizer-watch="title"> <-- add watch on each of the title divs
Event Banana
</div>
...rest of your code goes here
<div class="title" data-equalizer-watch="title">
Monday Event Number 2, with quite a long title, let's see how we manage to make it fit
</div>
...rest of your code goes here
<div class="title" data-equalizer-watch="title">
Voluptatem vel facere illum quaerat similique deleniti
</div>
</div>
*tested with v5.5.2