JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  
<div class="desc">
<h2 id="title_text">test1</h2>
<p id="under_text">test2</p>
</div>
        
<div id="pink">
<img src="https://images.vexels.com/media/users/3/234325/isolated/lists/cba2167ec09abeeee327ffa0f994151b-detailed-flower-illustration.png" onclick="imagefun()"></div>

<div class="game">
<img src="https://images.vexels.com/media/users/3/143128/isolated/lists/2a84565e7c9642368346c7e6317fa1fa-flat-flower-illustration-doodle.png" id="getImage"></div>

</div>

CSS

.game img {
     width: 300px;
     height: auto;
    }

.test {
  display: flex;
  flex-direction: row;
}

JavaScript

var counter = 0,
gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"],
imagefun = function () {
  if (counter >= gallery.length) {
      document.getElementById("title_text").innerHTML = "test3";    document.getElementById("under_text").innerHTML = "test4";     document.getElementById("pink").style.display = "none";
  }
  else{
      document.getElementById("getImage").src = gallery[counter];
      counter++;
  }
};