Flatiron - Align two side-by-side blocks to the bottom

Site URL: https://www.codylafond.com/#/therwood/

passcode: heyyouguys

I'm having trouble aligning these two text blocks along the bottom. When the browser window is resized they move up and down independently of one another. 

The left text block is just a regular text box with h1 text (with some custom CSS targeting it to adjust size, line height etc.) The right-hand text block is a code block with custom HTML/CSS to create a grid with a 3 column layout. I'm hoping there's a way to target the block IDs and align them that way, however I haven't found such a solution. 

I considered creating a new code block similar to the 3 column code block on the right-hand side, but creating it so that it spans the full width of the page, and has the heading appear within the first cell, while the 3 column content would populate columns 2-4. That way it all behaves as one unit. Unfortunately my HTML/CSS skills are leaving me with more questions than answers on how to pull that off. 

If anyone could point me in the right direction that would be fantastic! 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1650652992559_79042+.row {
    display: flex;
    align-items: flex-end;
}
}