Animation - change text on click, how can I do it?

Question

css

Good afternoon!
Can you please tell me how to implement this kind of animation?
I made a screen because the file is a real GIF ((



By clicking on the right block, everything that is underlined changes.
What was in the right block is transferred to the central one, what was in the central one is transferred to the left block
In the central block, the numbers that are underlined, are changing

<section class="main">
  <div class="container">
    <h1>ФУТБОЛЬНЫЙ РОЗЫГРЫШ</h1>
    <div class="wrap-days">
      <div class="days">
        <p>дневной</p>
      </div>
      <div class="days-center-block">
        <div class="wrap-center-block">
          <div class="days-center">
            <p>недельный</p>
          </div>
          <div class="timer">5Д 12:04:43</div>
        </div>
        <div class="content">
          <p>В розыгрыше участвует <span>13546 человек</span></p>
        </div>
      </div>
      <div class="days">
        <p>зх часовой</p>
      </div>
    </div>
  </div>
</section>

.main {
  padding-top: 65px;
}
.main h1 {
  font-weight: 500;
  text-align: center;
  font-size: 20px;
  margin: 0 0 15px 0;
}
.wrap-days {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}
.days {
  margin-top: 9px;
}
.days p {
  text-transform: uppercase;
  margin: 0;
  font-weight: 700;
  color: #8f8c98;
  font-size: 38px;
  border: 2px solid #8f8c98;
  border-radius: 6px;
  padding: 4px 0;
  width: 290px;
  text-align: center;
}
.days p:hover {
  color: #fff;
}
.days-center-block {
  margin: 0 28px;
  background-color: #c3181c;
  border-radius: 6px;
}
.wrap-center-block {
  background-color: #7f0a0d;
  border-radius: 6px;
}
.days-center {
  padding: 9px 9px 0;
  background-color: #c3181c;
  border-radius: 6px 6px 0 0;
}
.content {
  width: 287px;
    text-align: center;
    background-color: #7f0a0d;
    padding: 9px 9px 21px;
    border-radius: 0 0 6px 6px;
}
.content p {
  font-weight: 400;
  margin: 0;
  font-size: 20px;
}
.content p span {
  font-weight: 900;
}
.days-center p {
  text-transform: uppercase;
  margin: 0;
  font-weight: 900;
  color: #130c20;
  background-color: #fff;
  font-size: 38px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}
.timer {
  font-weight: 900;
  color: #fff;
  font-size: 38px;
  text-align: center;
  background-color: #c3181c;
  padding: 23px 9px 15px;
}