Position button at bottom no matter height of "table"

I am using the code for the Pricing Tables in Building Blocks and also using data-equalizer to make the height of each pricing table the same. That is working just fine, but I need my button in the last li to sit at the bottom no matter what the height is. Does anyone know how I would do that?

Probably with a bit flexbox.

Yes, have been trying to figure this out using flexbox. But I cannot figure out how to get the last list-item to sit on the bottom of the unordered list. Using the data-equalizer my unordered list gets a height in pixels. Here is some example code.

<ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3 is longer</a></li>
    <li class="cta"><a href="#">Page 4</a></li>
</ul>

Here is the css.

ul {
  display: flex;
  flex-direction: column;
  height: 300px;
}

For .cta I’ve tried align-self: flex-end, I tried align-self: baseline. I’ve tried all sorts of things, but I just am not sure how to get that last list-item to sit at the bottom.

Oh my goodness, I finally found the answer.

I just had to add:

.cta {
   margin-top: auto;
}
1 Like