How to fix the height of multiple carousel items with different content length

Question

I was trying to get a slider with the Carousel class of Bootstrap 4.

The content I put in each carousel items are texts(h2) and each carousel items (h2) has different length. That makes my slider display in different height when the slider functions.

<div id="test-carousel" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>SHORT CONTENT</h2>
        </div>
        <div class="carousel-item">
          <h2>VERRRRRRRRRRRY LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</h2>
        </div>
      </div>
      <a class="carousel-control-prev" href="#test-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next" href="#test-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div>

Is there anyway to fix the height of the slider so no matter how much words are put into the carousel slider, it always have the fixed height.

I tried to put attributes in .caousel-item selector in my own external .css file

.carousel-item {
    height: 500px;
}

but soon I realized it is stupid because when I use a smaller devices, the words get auto-wrapped and it wont display all contents.

Update: I was thinking if I could get a padding under the h2 element which is auto-adjustable corresponding to the length of the words. Is there anyway I could achieve so?

And yes, I could adjust the font-size with viewport size. (Pure CSS to make font-size responsive based on dynamic amount of characters)