How to stop ''Propagation'' on parent click triggers?

Hey guys, I’d like to prevent parent element from getting triggered ‘‘clicked’’ when child element being -intentionally- triggered (mouse click)
both elements have mouse click trigger but I only want child to be triggered when the parent is opened (check read only like)
I tried to make the Child absolute position and change index value but it didn’t help

I found this solution online but couldn’t really apply it in Webflow:

<div className="classname" onClick={(event) =>
    event.stopPropagation()
    console.log("classname div")
 }>
    classname
</div>

any tips on how to fix this?

in the screenshot you can see the child element I want to trigger (blue box)

thanks in advance for any help :pray:t4:


Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/hmdportfolio?utm_medium=preview_link&utm_source=designer&utm_content=hmdportfolio&preview=3c6081bafbb999a568e28b8f4defa11c&workflow=preview)

Hey guys, I fixed this with moving the child element to be sibling element to the other trigger-able element.
but I am still very interested to know how to fix this in context (Parent and child element) if we can’t move child to be sibling