Increase z-index on click: Fixed height causes uncontrollable space between items

I have troubles getting this design responsive without having huge gaps between the single boxes. i can make it look good per breakpoint, but every size in between its uncontrollable.
I used finsweet css code to increase z-index on click.

i have two boxes next to each other which overlap slightly. already on desktop. the content left and right refers to each other and always needs to start on the same height. thats why i used fixed height (VH). But this results in an uncontrollable amount of space between the divs.

this is my link. does anyone have an advice how to set it up properly? I´d be very very happy!!!

https://preview.webflow.com/preview/via-ida?utm_medium=preview_link&utm_source=designer&utm_content=via-ida&preview=34a080a146c24b6752eefe8f5dbce38c&workflow=preview

Hi @Herkules The way you have set it up doesn’t give you full control over responsiveness, mean that it will be hard to handle as each content has different amount of content etc.

The easiest way is to follow standard pattern mean create one block for each section and in this block create two another blocks (left, right). This way you will have both sides starting at the same point as they will be in one block. Than use flex and/or grid for responsiveness. Hope that make sense. :wink:

thank you so much. I am going to try this. it looks like a good solution. i will keep you posted about the result.