<ul class="box">
  <li class="box__item">
    <div class="card">
      <h2 class="card__title">
        Lorem ipsum dolor sit amet
      </h2>

      <p class="card__descr">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, vitae minus aut veritatis voluptatem accusantium repellendus porro modi maiores incidunt molestias consectetur eligendi enim non ex, atque, qui ipsa quisquam.
      </p>
      <div class="card__num">01</div>
    </div>
  </li>
  <li class="box__item">
    <div class="card">
      <h2 class="card__title">
        Lorem ipsum dolor sit amet
      </h2>

      <p class="card__descr">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, vitae minus aut veritatis voluptatem accusantium repellendus porro modi maiores incidunt molestias consectetur eligendi enim non ex, atque, qui ipsa quisquam.
      </p>
      <div class="card__num">02</div>
    </div>
  </li>
  <li class="box__item">
    <div class="card">
      <h2 class="card__title">
        Lorem ipsum dolor sit amet
      </h2>

      <p class="card__descr">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, vitae minus aut veritatis voluptatem accusantium repellendus porro modi maiores incidunt molestias consectetur eligendi enim non ex, atque, qui ipsa quisquam.
      </p>
      <div class="card__num">03</div>
    </div>
  </li>
  <li class="box__item active">
    <div class="card">
      <h2 class="card__title">
        Lorem ipsum dolor sit amet
      </h2>

      <p class="card__descr">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, vitae minus aut veritatis voluptatem accusantium repellendus porro modi maiores incidunt molestias consectetur eligendi enim non ex, atque, qui ipsa quisquam.
      </p>
      <div class="card__num">04</div>
    </div>
  </li>
</ul>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}

body {
  font: 16px/24px Arial, sans-serif;
  height: 100dvh;
}

.box__item:nth-child(even) {
  background-color: #ccc;
}

.card {
  height: 100%;
  padding: 20px;
  writing-mode: vertical-lr;
  transform: scale3d(-1, -1, 1);
  display: flex;
  gap: 20px;
}

.box {
  display: flex;
  height: 100%;
}

.card__descr {
  display: none;
}

.box__item.active .card__descr {
  display: block;
}

.box__item {
  width: 10%;
  transition: all 1s;
  flex-shrink: 0;
}

.box__item.active {
  width: 100%;
  flex-shrink: 1;
}

.box__item.active .card {
  flex-direction: column;
  transform: none;
  writing-mode: initial;
}

.card__num {
  margin-top: auto;
  font-weight: bold;
}

const listItems = document.querySelectorAll('.box__item');

listItems.forEach(item => {
  item.addEventListener('click', () => {
    listItems.forEach(listItem => {
      if (listItem !== item && listItem.classList.contains('active')) {
        listItem.classList.remove('active');
      }
    });

    if (item.classList.contains('active')) {
      item.classList.remove('active');
    } else {
      item.classList.add('active');
    }
  });
});