How to get tags to stay in same spot when screen size changes? [closed]

I’m struggling to find an answer because I’m not sure how to ask the question, but basically I’m trying to get my tags to stay in the same spot (and not move to another spot/line) even when the page is minimized or if it’s being viewed on mobile/another device with different resolution.

how I want my index to look on all screen types: how I want my index to look on all screen types how the page looks if I reduce the screen width: how the page looks if I reduce the screen width

My code:

<title>World of Alt Protein</title> 
<header>     <h1>World of Alt Protein</h1> </header> 
<div class="buttons">     <img src="photos/index/buttons/button1.PNG">     <img src="photos/index/buttons/button2.PNG">       <img src="photos/index/buttons/button3.PNG">     <img src="photos/index/buttons/button4.PNG">       <img src="photos/index/buttons/button5.PNG">   </div> 
<div class="section-1">     <img src="photos/index/plant.png" width="400" height="600">     <span class="title1">Plant-Based</span> </div>  <div class="section-2">     <img src="photos/index/ferm.jpeg" width="400" height="600">     <span class="title2">Fermentation</span> </div>  <div class="section-3">     <img src="photos/index/cult.jpeg" width="400" height="600">     <span class="title2">Cultured</span> </div> 

Is this something I would fix by adding code to html or css? Also, please if anyone has better wording for asking this question, I’d love to hear it. Thank you in advance!!