How to i overlay a div using css

Question

I created an HTML page that has 2 divs in it. The first div has mostly images on it and the second div is a small block of the text. Here I want to bring the second div as an overlay of the first div, instead of showing it as a separate div. Here is my code.

body {
  height: 100vh;
  overflow: hidden;
  background-color: white;
}

.container {
  display: flex;
}

.container>div {
  flex: 1;
}

#slideRightToLeft {
  background-color: #164656;
  color: white;
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
  margin-left: 100%;
  min-width: 20%;
  transition: all 0.5s;
}

#slideRightToLeft.show {
  display: block;
  margin-left: 0%;
  margin-bottom: 50px;
  float:right;
  width:25%;
}

<div class="container" align="center" style="display:block; overflow:auto;width:100%;height:100vh">
            <div>
                
                <img src="https://i.ibb.co/5YnjPzJ/Screen-Shot-2020-05-21-at-9-38-54-AM.png" alt="Screen-Shot-2020-05-21-at-9-38-54-AM" border="0" style="width:100%"/>
                <img src="https://i.ibb.co/NN8197N/Screen-Shot-2020-05-21-at-9-39-06-AM.png" alt="Screen-Shot-2020-05-21-at-9-39-06-AM" border="0" style="width:100%"/>
                <img src="https://i.ibb.co/TgMyKps/Screen-Shot-2020-05-21-at-9-39-18-AM.png" alt="Screen-Shot-2020-05-21-at-9-39-18-AM" border="0" style="width:100%"/>
            </div>
            
            <div id="slideRightToLeft" class="show">
                <span class="slds-text-heading_medium">Are you looking for Assistance on Onboarding, I can help you.</span>
            </div>
        </div>

I am able to see it currently but want it pushed a bit above. Please let me know how I can do this.

also, I've tried the solutions available at enter link description here but they didn't workout for me.

Thanks