How can I get my carousel-summary blocks to line up?

I used custom code that I found to change the background color and add padding to my summary-carousel blocks. Unfortunately, I cannot figure out how to make the slides at the bottom line up, so that all of the blocks appear to have the same length.

My code WAS working at first, and then it stopped working? Here's what I have—

 .sqs-gallery-design-carousel-slide .summary-content {
background: #D4AC97;
padding: 20px;
flex: 1;
}
.sqs-gallery-design-carousel-slide .summary-thumbnail-container {
margin-bottom: 0 !important;
}
.sqs-gallery-design-carousel .sqs-gallery {
display: flex;
}
.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide {
display: flex;
}
.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}

Please help!

Need a link to your page to help.

On 10/25/2020 at 4:06 PM, rwp said:

Need a link to your page to help.

Here ya go! https://www.midwestjess.com/

I've been messing with this for about an hour, I can't get anything to work.

@tuanphan any ideas?

31 minutes ago, rwp said:

I've been messing with this for about an hour, I can't get anything to work.

@tuanphan any ideas?

I think I will set min-height for title ☺️

3 minutes ago, tuanphan said:

I think I will set min-height for title ☺️

I think that's the only way.

On 10/27/2020 at 10:36 PM, rwp said:

I think that's the only way.

Another similar option would be to set min-height for .summary-content. This works if you have a bunch of metadata that could also go onto multiple lines. Example:

.summary-content {min-height:100px}