So, I'm doing a project on React and I have this div tag which is a container that consists of information portrayed in this first image. Then what I would like to do is within that div without having the page refreshed change the display into this second image. It is like a card stacking on each other. I have no idea what keywords to search on google so I couldn't find any examples to do this.

Here's my html and css code for my div in the first image.

HTML

<div className={styles.showTicketBox}>
   <div className={styles.showTicketBox1}>
      <div className={styles.userEligibleTickets}>
         <p>Your Eligible Tickets</p>
         <h3 style={tokenContent}>0 Ticket(s)</h3>
      </div>
      <div className={styles.userDepositedTickets}>
         <p>Your Deposited Tickets</p>
         <h3 style={tokenContent}>0 Ticket(s)</h3>
      </div>
   </div>
   <div className={styles.showTicketBox2}>
      <div className={styles.userWinningTickets}>
         <p>Your Winning Tickets</p>
         <h3 style={tokenContent}>0 Ticket(s)</h3>
      </div>
      <div className={styles.userTicketsAllo}>
         <p>Your Allocation</p>
         <h3 style={tokenContent}>0 SHI</h3>
      </div>
   </div>
</div>

CSS

.showTicketBox{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px;
    margin-top: 2em;
    .showTicketBox1{
        width: auto;
        height:auto;
        display: inline-block;
    }
    
    .showTicketBox2{
        width: auto;
        height:auto;
        position: relative;
        display: inline-block;
    }
}