CSS Align on the bottom doesn't work in Safari

Question

I am working with foundation 6. I have two columns with one image each. I need to position the second image at the bottom of the div (ie in line with the bottom of the first column).

I have the following CSS:

.vertical-wrapper {
  position: relative;
}

.entry-content img.duck{
  position:absolute;
  bottom:0%;
  right:1%;
  max-width: 25%;
}

And here is the html

  <div class="small-3 column vertical-wrapper">
    <img class="bottle" src="https://..." width="222" height="900" />
  </div>

  <div class="small-9 column vertical-wrapper">
      <img class="duck" src="https://..." width="200" />
  </div>

</div>

This is working in IE, Firefox and Chrome but this is not working in Safari. It seems that this is coming from the second column which is taking the full height in all browsers but not in Safari...

Here is a live example: https://lagalope.com/test-2/

Answer 1

I have set the relative position on the row rather than on he two columns:

<div class="row vertical-wrapper">

    <div class="small-3 column">
        <img class="bottle" src="https://..." width="222" height="900" />
    </div>

    <div class="small-9 column">
        <img class="duck" src="https://..." width="200" />
    </div>

</div>

Not sure why this works differently in Safari than in other browsers...