CSS: My div needs to sit at the bottom of it's wrapping div! Not just the view-able screen

Question

Hope you are well,

The following image highlights my CSS problem. The white bordered div with 'Contact' in the middle, I want to stick to the bottom of the screen.

Here is the CSS applied to that div as well as it's wrapper div! Note. I'm having this problem after the media queries are applied.

<div className='wrapperLanding'>
      <div className="contentWrapper">
           <p className="content">Illumination AI is a start-up studio that is focused on applying AI and ML to novel combinations of data across a diverse range of industries.</p>    
           <a className="contact" href="mailto:info@illumination.ai?subject=illumination20%AI%20Site%20Contact%20Inquiry">Contact</a>  
      </div>
</div>
/* contentWrapper is the child of wrapperLanding */
.wrapperLanding{
    background-image: url("../images/lighthouseBackdrop.jpg");
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.contentWrapper{
    position: absolute;
    bottom: 3%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-height: 700px) {
    html, 
    body{
        overflow-y: visible;
    }
    .wrapperLanding{
        height: 700px;
    }
    .contentWrapper{
        /* position: fixed; */
        bottom: 3%;
    }
}

You may have noticed I have 'position: fixed;' commented out. With it applied, it still doesn't quite deliver the desired effect, as demonstrated below.

The problem here, is that while the image is stuck to the bottom of the user's view... it is NOT stuck to the bottom of the wrapping div! Any suggestions?

Thanks for your time!