When working with boxes of info, what you have inside will shift for different screen sizes. That’s great that we can keep it all together, but sometimes it helps to have an element inside the box that does not shift and this keeps the appearance of the alignment. That’s easy enough to align everything at the top, but what about another alignment at the bottom?

No fancy code is needed- you only need to use the <div> tags in the correct order and the box needs to have a specific height. In the screenshot below you’ll see three boxes with different amounts of header and different amounts of text, but the button is always at the same bottom position. The “red” outline shows the wrapper-box (which has the box-shadow), the “blue” outline shows the info-box (this contains the icon, header and text), and the “green” outline shows that the button is outside of the inner <div> (this can be it’s own <div> or not- as long as it is outside the info-box <div>).

For smaller screen sizes I have removed the fixed height because aligning the boxes isn’t needed anymore and this removes the white-space.

Tools: HTML5, CSS3.