Menu icon Foundation
Equalizer Stops Working with Bottom and Margin

I have a textbook use case for Foundation's great Equalizer tool. I have some boxes that need to be of equal height where the content is variable in height, and that all works great. The problem that I have is that the designs call for a stylish vertical offset of one of the boxes. The problem I am having with this is that for some reason Equalizer fails to Equalize anything if I try two different techniques. I cannot think of another way to do this but I still do not understand why any of this would fail.

Solution 1: Position Relative, Bottom

https://codepen.io/s1m0ne/pen/veQxJY

<div class="row container" data-equalizer id="test-eq">
   <div class="medium-6 columns">
       <p>...</p>
   </div>
   <div class="medium-6 columns">
       <p>...</p>
   </div>
</div>

.offset {
   position: relative;
   bottom: 40px
}

Solution 2: Negative Margin Top

https://codepen.io/s1m0ne/pen/GMwWdZ

<div class="row container" data-equalizer id="test-eq">
   <div class="medium-6 columns">
       <p>...</p>
   </div>
   <div class="medium-6 columns">
       <p>...</p>
   </div>
</div>

.offset {
   margin-top: -40px
}

Any thoughts or a technique that would work would be greatly appreciated.

Equalizerfoundation 6

I have a textbook use case for Foundation's great Equalizer tool. I have some boxes that need to be of equal height where the content is variable in height, and that all works great. The problem that I have is that the designs call for a stylish vertical offset of one of the boxes. The problem I am having with this is that for some reason Equalizer fails to Equalize anything if I try two different techniques. I cannot think of another way to do this but I still do not understand why any of this would fail.

Solution 1: Position Relative, Bottom

https://codepen.io/s1m0ne/pen/veQxJY

<div class="row container" data-equalizer id="test-eq">
   <div class="medium-6 columns">
       <p>...</p>
   </div>
   <div class="medium-6 columns">
       <p>...</p>
   </div>
</div>

.offset {
   position: relative;
   bottom: 40px
}

Solution 2: Negative Margin Top

https://codepen.io/s1m0ne/pen/GMwWdZ

<div class="row container" data-equalizer id="test-eq">
   <div class="medium-6 columns">
       <p>...</p>
   </div>
   <div class="medium-6 columns">
       <p>...</p>
   </div>
</div>

.offset {
   margin-top: -40px
}

Any thoughts or a technique that would work would be greatly appreciated.