Как сделать так, чтобы блок не уступал свою позицию по вспомогательной оси блоку, который находится над ним?

Всем здравствуйте!

Я специализируюсь на python-бэкенд разработке. Но сейчас делаю свой первый full-stack проект, и поэтому только начинаю углубляться в HTML и CSS.

Контекст задачи: есть каталог товаров с разными категорями. У каждой категории есть текстовый блок описания непосредственно перед списком карточек продуктов. Этот блок имеет разную ширину на разных размерах экрана и родителя класса d-flex justify-content-center. В итоге, если у разных категорий разное по количеству текста описание, то при переходе между категориями контент со списком товаров скачет вверх-вниз.

Я хочу сделать так, чтобы блок описания не отодвигал от себя блок со списком карточек товаров, а растягивал установленные границы. При этом я не хочу делать описанию класс col-12 для всех экранов, чтобы текст не растягивался на больших экранах на всю ширину.

Вот мой HTML код контейнера описания:

<div class="container px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <div class="row d-flex justify-content-center">
        <div class="col-12">
            <h1 class="display-4">{{ home.home_h1 }}</h1>
        </div>
        <div class="col-lg-6 col-xl-6 col-md-10 col-sm-12 col-12">
            <p class="lead">{{ home.home_annotation }}</p>
        </div>
    </div>
</div>

Буду благодарен за любой ответ!