Bootstrap Carousel прыгает, потому что высота текста не равна соответствующей карте

Question

У меня проблемы с классом карусели в начальной загрузке.Я скопировал большую часть этого кода непосредственно из школ w3, а затем немного изменил, чтобы соответствовать моим потребностям.Проблема, с которой я столкнулся, заключается в том, что когда второй слайд имеет высоту, отличную от заголовка раздела, экран перескочит.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container text-center my-3">
  <div class="row mx-auto my-auto align-items-center">
    <div id="educationCarousel" class="carousel slide w-100">
      <div class="carousel-inner">
        <div class="carousel-item py-5 active">
          <div class="row d-flex justify-content-center">
            <div class="col-sm-10 align-center">
              <div class="card-transparent">
                <div class="card-body sectionHeaderTitle">
                  <p class="card-title display-3">Section title</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item py-5">
          <div class="row d-flex justify-content-center">
            <div class="col-sm-10 align-center">
              <div class="card card-overlay">
                <div class="card-body">
                  <h1 class="card-title">Section Title</h1>
                  <p class="card-body">info
                    <br> some more info
                    <br> asdf
                    <br>
                    <br> asdf asdf a fasdf asfd fas df
                    <br>
                    <br>asdf afsd f asd fasfd fasfasdfas
                    <br> asdf asf f as sfd f </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#educationCarousel" data-slide="prev">
        <span><img src="../data/Arrows/leftArrow.png"></span>
      </a>
      <a class="carousel-control-next" href="#educationCarousel" data-slide="next" data toggle="popover" title="Click Me!" data-content="Click here to see more information about Stuart's education">
        <span><img src="../data/Arrows/rightArrow.png"></span>
      </a>
    </div>
  </div>
</div>

Я предполагаю, что если высоты одинаковы, экран не будет прыгать.Проблема заключается в том, что это текст против карты.Кто-нибудь знает, как установить высоту текста div, чтобы он соответствовал соответствующей карточке?Или есть какое-то другое решение, которое я не смог найти?

Примечание. Мой файл CSS не затрагивает функциональность какого-либо объекта в этом фрагменте кода.