Two text blocks to be the same height - flexbox not working

Site URL: https://www.maryscholten.com/copy

Hello, I would like these two columns (the "my experience" column left and the body copy column right) to be the same height even as resolution changes. 

So instead of looking like this (screenshot from my site):

It looks more like this (design I am trying to mimic):

div#page-5e79719043a2c54bbc968650>.row:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
}
div#page-5e79719043a2c54bbc968650>.row:nth-child(2)>.col {
    background: red;
}

You're a legend, thank you. Now I am wondering what I should look for in my website code and what to replace in your code, to apply this to the other text blocks.

4 minutes ago, MaryAgnes said:

You're a legend, thank you. Now I am wondering what I should look for in my website code and what to replace in your code, to apply this to the other text blocks.

Find ID, A page usually has ID: #block--, #page--, #yui--, #collection--

Try find & replace #page

I am trying to update text blocks on the same page, so there is only one page-ID. I tried using similar code using block ID's but to no avail. Is there something else I can change?

23 minutes ago, MaryAgnes said:

I am trying to update text blocks on the same page, so there is only one page-ID. I tried using similar code using block ID's but to no avail. Is there something else I can change?

Email Campaign copy

div#block-yui_3_17_2_1_1585611604780_145131+ .row {
    display: flex;
    flex-wrap: wrap;
}
div#block-yui_3_17_2_1_1585611604780_145131 +.row>.col {
    background: red;
}

Copywriting and editing

div#block-yui_3_17_2_1_1585611604780_138663+ .row {
    display: flex;
    flex-wrap: wrap;
}
div#block-yui_3_17_2_1_1585611604780_138663 +.row>.col {
    background: red;
}

Thank you!