html – Flex divs not colliding and flexing relative to each other

I want the lower div (containing the image and the button) to collide as in not overlap with the division above it (texts’ divisions), so when the button hits, collides, with the division above it the button moves down squishing the image under it if there is no space available. You can see the GIF to visualize what I’m trying to do.

I tried putting both divisions on the same z-index since they weren’t but that was futile.

enter image description here


 .titleContainer {

    position: absolute;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    height: 210px;
    display: flex;  
    margin: 100px;
    margin-top: 150px;   
    z-index: 1;

  }