JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-2">

      <div class="carousel slide pointer-event" data-bs-ride="carousel" id="carrouselAvisIndicators">
        <div class="carousel-indicators">
          <button aria-label="Slide 1" class="" data-bs-slide-to="0" data-bs-target="#carrouselAvisIndicators" type="button">&nbsp;
          </button>
          <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carrouselAvisIndicators" type="button" class="active" aria-current="true">&nbsp;
          </button>
          <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carrouselAvisIndicators" type="button" class="">&nbsp;
          </button>
          <button aria-label="Slide 4" data-bs-slide-to="3" data-bs-target="#carrouselAvisIndicators" type="button" class="">&nbsp;
          </button>
          <button aria-label="Slide 5" data-bs-slide-to="4" data-bs-target="#carrouselAvisIndicators" type="button" class="">&nbsp;
          </button>
        </div>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item text-center p-4">
            <p class="temoignage">bla bla bla bla bla bla
            </p>
            <p class="display-6 strong">BLABLA
            </p>
            <p>bla bla bla bla bla bla
            </p>
            <p class="display-6">Bla bla bla
            </p>
          </div>
          <div class="carousel-item text-center p-4 active">
            <p class="temoignage">Bli bli bli bli
            </p>
            <p class="display-6 strong">Blibli
            </p>
            <p>Bli bli bli
            </p>
            <p class="display-6">Bli bli
            </p>
          </div>
          <div class="carousel-item text-center p-4">
            <p...

CSS

.container {
  background: red;
}

.blue {
  background: blue;
}

.carousel-inner {
  transition: height 1s;
}

JavaScript

const myCarousel = document.getElementById('carrouselAvisIndicators');

myCarousel.querySelector('.carousel-inner').style.height = myCarousel.querySelector('.carousel-item.active').offsetHeight + "px";

myCarousel.addEventListener('slide.bs.carousel', event => {
  const next = event.relatedTarget.cloneNode(true);
  next.style.visibility = 'hidden';
  next.style.display = 'block';
  myCarousel.appendChild(next);
  myCarousel.querySelector('.carousel-inner').style.height = next.offsetHeight + 'px';
  myCarousel.removeChild(next);
});