Align child elements of different blocks

I’m trying to get the button in 3 columns in a WordPress block to stay at the bottom.
It’s a section block with 3 columns.

Screengrab of colums

Having tried various options (including “position: absolute; bottom: 0;” and “margin-top: auto;”) the only thing that seems to work is making the columns grids. The only problem is the content of the columns is evenly spaced, so the headers and paragraphs don’t align.

I’ve tried getting to grips with stylising grids but I can’t work out how to solve the problem.

This is how I want it to look:

Design

Any assistance would be greatly appreciated.

Here’s the current css I’ve applied to the columns:

/* Columns */

/* Print */
#wp-block-themeisle-blocks-advanced-column-f1366030 {
    display: grid;
    grid-template-rows: fr fr fr auto;
}

/* Graphic Design */
#wp-block-themeisle-blocks-advanced-column-934fe67f {
    display: grid;
    grid-template-rows: fr fr fr auto;
}

/* Website Design */
#wp-block-themeisle-blocks-advanced-column-b56bf048 {
    display: grid;
    grid-template-rows: fr fr fr auto;
}

I’ve tried “position: absolute; bottom: 0;” and “margin-top: auto;” but neither worked.
I also tried “display: flex;” which worked until I re-sized the browser window, at which point the button moved up.

You need to sign in to view this answers