how to change a div position and make it responsible

I want to change the title "Jeneral Qasem Soleymani " and its subtitle to be upon the picture as shown in picture.

and this is my container of title and sub title:

<div>
<h1>General Qasem Soleymani</h1>
<p id="subtitle">The man who cleaned the world of terrorists</p>
</div>

for this I changed the css code to

h1{
   font-size: 2rem;
   margin-bottom: 0;
   position:absolute;
   top: 40%;
   left:5%; 
   color:white; 
  }



#subtitle{
          font-size:1.3rem;
          position:absolute;
          top: 45%;
          left:5%;
          color:white;
         }

and I reached tihs:

What I want to do is the responsiveness. so when user changes the dimension of page the content still stack in that place And automatically change the font size to fit the image size.

how can I do that?