Hi, I’m wondering if anyone has tackled this challenge and could point out where I’m going wrong. I’ve looked at many of the related posts, but none address the convoluted situation I’ve created for myself with the design. 
My goal is to create a collection that will function similarly to this page: Marie Forleo Success Stories From Around The World
On my client’s site, when you click on “Read More”, the orange content box should appear below and push any other content below down the page. Then the user can close the box when they are done reading it.
The black you see underneath the orange content box in the image above is the footer. The content is floating above the footer instead of pushing content down the page.
The struggle is due to the fact that all the content is within a flex box (and the flex box is inside a column of a row). So I had to use absolute positioning to get the orange content box to appear where I wanted it on the page.
If I take the content box out of the Flex box, I can get the hide/show content to work properly and push the content down the page.
However, then the content box is no longer a sibling and I am not able to use the “limit to sibling elements” setting for the open/close interaction. That’s a problem as it means all the hidden content on the page will open when any of the Read More buttons are clicked.
Perhaps there is a solution I’m missing (still relatively new to Webflow) or a better way to approach it?
This shows the structure of the elements involved:
These are the interaction settings on the open button:
These are the interaction settings on the hidden content div:
Any advice would be greatly appreciated. 
Suzanne
Here is my site Read-Only: https://preview.webflow.com/preview/succeed-draft?preview=aed0a3d8dfdcef9f98f40389ff93da2e
Here is the page on my published live site: http://succeed-draft.webflow.io/about/success-stories