как установить одинаковую высоту для ползунков в столбцах bootstrap

Question

первый на моем сайте имеет два ползунка и каждый внутри столбца, как показано ниже:

<div class="row">
    <div class="col-md-3">
        <div class="carousel slide">
            <div class="carousel-inner">
                <div class="carousel-item">
                    <div class="topSalon"><img class="d-block w-100 img-fluid"
                                               src="http://127.0.0.1:8000/upload/images/2020/avatar/pic911_www.jahaniha.com_2.jpg"
                                               alt="First slide">
                        <div class="topSalonBody"><h3>سالن زیبایی سحر</h3>
                            <p>لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ،
                                صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب
                                بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می
                                نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد</p></div>
                    </div>
                </div>
                <div class="active carousel-item">
                    <div class="topSalon"><img class="d-block w-100 img-fluid"
                                               src="http://127.0.0.1:8000/upload/images/2020/avatar/Beauty-Secrets.jpg"
                                               alt="First slide">
                        <div class="topSalonBody"><h3>سالن بیتا منفرد</h3>
                            <p>توضیحات کوتاه</p></div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" role="button" href="#"><span aria-hidden="true"
                                                                          class="carousel-control-prev-icon"></span><span
                    class="sr-only">Previous</span></a><a class="carousel-control-next" role="button" href="#"><span
                aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
    </div>
    <div class="col-md-9" style="min-height: 300px;">
        <div class="carousel slide">
            <ol class="carousel-indicators">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item"><img class="d-block w-100 img-fluid"
                                                src="http://127.0.0.1:8000/upload/images/slide/2020/4/1_28015.png"
                                                alt="First slide">
                    <div class="carousel-caption"><h3>اسلاید اول</h3>
                        <p>توضیحات کوتاه این اسلایدر 1</p></div>
                </div>
                <div class="carousel-item"><img class="d-block w-100 img-fluid"
                                                src="http://127.0.0.1:8000/upload/images/slide/2020/4/2_11831.png"
                                                alt="First slide">
                    <div class="carousel-caption"><h3>اسلاید اول</h3>
                        <p>توضیحات کوتاه این اسلایدر 2</p></div>
                </div>
                <div class="active carousel-item"><img class="d-block w-100 img-fluid"
                                                       src="http://127.0.0.1:8000/upload/images/slide/2020/4/3_34880.png"
                                                       alt="First slide">
                    <div class="carousel-caption"><h3>اسلاید اول</h3>
                        <p>توضیحات کوتاه این اسلایدر 3</p></div>
                </div>

            <a class="carousel-control-prev" role="button" href="#"><span aria-hidden="true"
                                                                          class="carousel-control-prev-icon"></span><span
                    class="sr-only">Previous</span></a><a class="carousel-control-next" role="button" href="#"><span
                aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
    </div>
</div>

custom css код:

.single-blog-post .read-more-btn {
    position: relative;
    bottom: 24px;
    left: 16px;
}

.top-salon-container {
    margin-top: 18px;
    border-radius: 12px !important;
    background-color: #f7f7ff !important;
    box-shadow: -9px 7px 30px -5px rgba(150,170,180,0.5);
    height: 97%;
    h2{
        color: #222a;
        background: linear-gradient(45deg, #d0d0d5, #e0e0e8);
        padding: 12px 16px;
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }

    .top-salon-item {
        padding: 8px;

        img {
            margin: 2px 0 2px 8px;
            border-radius: 12px !important;
            padding: 8px;
        }

        .info {
            padding: 12px 6px;
            h4 {
                padding-top: 10px;
                font-size: 22px;
                color: #858587;
            }
            p {
                text-align: justify;
            }
        }
    }


    @media (max-width: 1200px) {
        h2 {
            font-size: 1.75em;
        }
    }

    @media (max-width: 992px) {
        h2 {
            font-size: 1.5em;
        }
    }

}


.topSalon {
    .topSalonBody {
        padding: 10px;
    }
}

Я хочу на эту высоту справа Ползунок должен совпадать с левым ползунком (высота ползунков должна быть одинаковой), но это неверно, если размер текста каждого правого ползунка различен.

• при большом размере текста

---

• при небольшом размере текста

как можно установить одинаковую высоту для значений в любом состоянии?