Boxes with Aligned Buttons & Copy at Bottom

This site is best viewed in a modern browser with JavaScript enabled.

Boxes with Aligned Buttons & Copy at Bottom

cbVision

Hello,

I'm stuck on this one without having to use a Javascript hack. Basically, I have three columns using flexbox and want to align buttons across the bottom. Typically, I just position the button with absolute positioning and then use padding to make up for the height. The problem I'm running into is having a button AND extra footnote for some of the elements. Since the footnote copy is variable in height, I can't seem to create the foolproof solution.

Here's an example:
https://codepen.io/anon/pen/qJjPpw

This sample is achieving what I want, but I have to explicitly set the position for each box. I just want the buttons to line up and have the extra copy still be on the bottom.

Any advice? Thanks!

Sempervivum

I assume that the elements in each .boxes belong together. If so, you might consider this to be a hack either, as it breaks that semantics:
http://jsfiddle.net/Sempervivum/1cqp7of8/7/
However it results in the layout you require and adjusts fine to the text content, including the footnote.
May be this can be done by grid layout too, but till now I shyed at using it as it's not fully supported by IE11.

cbVision

Sempervivum, thanks for the insight! Your suggestion had me think of something else that still keeps things somewhat in the right order semantically.

I'm trying the "order" property with flexbox:
https://codepen.io/anon/pen/qJjPpw