Move content below when 'read more' is clicked on my dropdown and section expands

I have a blog section where a user can click ‘read more’ and they can read the rest of the question. The section just opens over the content below it, when I want that content below to still be seen… How can I have the content lower on the page move down when the section above it is expanded?

Here’s a video showing what I mean:

Here is my site Read-Only:

That’s tricky. I messed around with it for awhile. In reality, you really shouldn’t be using a dropdown component for this. Anytime you use a component for a reason for which it wasn’t design, you’re going to run into problems. And that’s because you can’t see everything that’s going on (css-wise) because it’s been custom-coded in.

I would redesign it with interactions using height: auto. Also, I would used either flexbox or grid for layout, not columns. Columns is another example of an older and custom coded tool that’s always going to be a little wacky and annoying.

Thanks… so I created a new page called ‘test copy’ where I rebuilt this using interactions, but now my issue is the content size varies and when I set the height to fit the largest amount of text, there’s a lot of dead space on most. This content is pulling info from a collection, so I’m not using columns or a grid- it’s the collection that’s giving me the layout. Thoughts?

Is there a way to do this other than putting a set pixel height??