html - Position three buttons on the same centre line

Question

I have three separate buttons within the same row and container, however due to the content above them, they're not all on the same horizontal line.

This is worsened on a big screen

How can I get all these buttons sitting on the same centre point?

Live URL: http://185.123.97.138/~kidsdrum/moneynest.co.uk/

HTML

<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>

Answer 1

The problem is that you can't predict the text in the above sections will always finish at the same point so, as they currently are, it's not technically possible. There are some hacky fixes you could do, but I think the best solution would be to take the buttons out of those containers entirely, and have a separate "row" element that contains them.

That way, if the text in one of the columns gets longer for whatever reason (text added, different screen sizes), the whole "button row" will be pushed down equally and the buttons will always maintain the same baseline

Hope that makes sense