Adjusting height of 3 columns to match

Site URL: https://fiddle-apricot-633p.squarespace.com/

Hi Circle Community!

Site Password: brianamathias

In the SERVICES section, I've created 3 columns and customized them using flexbox. Each column has an accordion block at the bottom, that when expanded, expands the column. I'd like all 3 columns to have the same height when nothing is expanded and only change that height when the respective accordion block is expanded. 

I used display: flex; and align-items: stretch; at first, which made all 3 columns have the same height but then when one of the accordion blocks was expanded, the other two columns expanded with it. I've attached screen shots to demonstrate. 

I'd like to target the height of the columns in another way to make them all the same height (and still responsive). On mobile this isn't an issue since the columns stack. 

Thank you!

Answered my own questions after some playing! If anyone else has this issue, here was my fix...

I kept the flex-start value for the align-items property when targeting the parent container (.sqs-col-12 .sqs-row) and then targeted the individual column (.sqs-col-4), then used the min-height property and set it to 50vh; that way they all have the same minimum height but still expand when the accordion is expanded.