Preventing child element from moving outside parent div when resizing browser's window

Question

I'm creating a new website now adding a little info box to it. The problem is that when you resize the browser window, the element moves outside the parent div. I've already tried various tricks, including position: absolute and static. Unfortunately it doesn't work. My code looks like this.

An example of how this is supposed to work:

LINK

And below is my HTML & CSS code:

<div className="img-wrapper">
   <div className="img-area">
      <div className="single-img-one"><img src={perfume} alt="Luxury perfume" /></div>
      <div className="single-img-two"><img src={desk} alt="Minimal desk" /></div>
      <div className="wrapper">
         <div className="simple">
            <h1>TEXT<h1>
         </div>
      </div>
   </div>
</div>

.img-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.single-img-one img {
    width: 80%;
    height: 70%;
}

.single-img-two img {
    width: 100%;
    height: 75%;
}

.wrapper {
    position: absolute;
    height: 400px;
    width: 500px;
    left: 20%;
    top: 10%;
    background-color: rgba(255, 255, 255, 0.96);
    z-index: 1;
}

Answer 1

I don't know where i learnt it but here goes... Just style your wrapper with font-size defined in vw (view width).. and padding according to em ( local font measurement ).. The size of wrapper and text remains similar throughout.. Improvise for mobile devices or opposite

 .wrapper {
    position: absolute;
    padding: 6em;
    font-size: 4vw;
    left: 20%;
    top: 10%;
    background-color: rgba(55, 255, 255, 0.96);
    z-index: 1;
}
@media screen and (min-width: 420px){
  .wrapper{
    font-size: 2vw;
  }
}