Align 2 blocks of different height to the bottom off a 100vh footer

Site URL: https://plantain-halibut-ggpk.squarespace.com/livre-le-cousin/#/livres-le-cousin

Hi everyone, 

https://plantain-halibut-ggpk.squarespace.com/livre-le-cousin/#/livres-le-cousin

password : juliettebiennee

For this website, I already messed a bit with the CSS but creating a full width browser footer with this bit of CSS :

.Footer-inner{
  height:100vh;
}

Inside this footer I have 2 columns of menus, one left aligned and one right aligned  (also used a bit of code for this right align) :

I would like for these menus to be fixed into the footer excepts that these 2 blocks would not be aligned to the top of the Footer, they would always appear at the bottom of the page, at the bottom of the footer, like a position relative to the bottom of the footer  :

I've not been able to find anywhere a piece of CSS code that could help do that. Ideally I would like to use only CSS code, the person is planning to by a personal plan for that website. 

Hope someone will be able to help me on this 🙂

@Paul_M add this to your custom CSS:

 

.Footer-inner{
  	height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

Result:
 

Thanks a ton it worked !

My 2 texts blocks were still aligned from the top relatively to each other so I cheated a little bit and just trough this into the CSS to lower by a few pixels the block on the right side. Probably not the nicest way but it worked  😅

#block-yui_3_17_2_1_1597238624427_57433{
  top:117px;
}

Hi again, 

So it's becoming a little bit more complicated since I would like to align the 2 menus at the bottom but to keep on block always align to the top of the footer :

^ This is what I get when I use this code : 

.Footer-inner{
  	height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

But this is what I would like to get :

I've tried a bunch of things like using "position : relative" or even using the "align-self" css code to try to bring the logo block back up. 

I've also tried keeping everything up and lower the 2 blocks at the bottom but not able to crack it ;(

any clue ?

Still looking for a solution, not been able to figure out so far

Hi Everyone, still not able to find a solution to my problem 🙂

If anyone was searching for this, I finally found it myself after a very empirical trials and errors moment 🙂

.Footer-inner{
  	height:100vh;
	display: flex;
	flex-direction: column;
}
/*Content of the bottom block footer only aligned with the bottom of the page*/
.tweak-footer-layout-stacked .Footer-blocks--bottom {
    height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}