Выровнять текст разных размеров по вертикали

Question

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

<section role="outer" class="bg-cover section section-fullWidthContent position-relative first">
    <div class="container">
        <div class="d-flex">
            <div>
                <h1 class="section-title">Title</h1>
            </div>
            <div class="ml-auto">
                <a href="" class="text-md-right"><h1 class="xsmall-title">See All</h1></a>
            </div>
        </div>
        <hr/>
    </div>
</section>

---

.section-title {
    font-weight: 900;
    text-transform: uppercase;
}

.xsmall-title {
    font-weight: 400;
    font-size: 1.3em;
    text-transform: uppercase;

}

Answer 1

Просто добавьте центр выравнивания элементов на внешнем элементе div, который содержит оба элемента

<section role="outer" class="bg-cover section section-fullWidthContent position-relative first">
    <div class="container">
        <div class="d-flex align-items-center">
            <div>
                <h1 class="section-title">Title</h1>
            </div>
            <div class="ml-auto">
                <a href="" class="text-md-right"><h1 class="xsmall-title">See All</h1></a>
            </div>
        </div>
        <hr/>
    </div>
</section>

Answer 2

Попробуйте это

.section-title {
    font-weight: 900;
    text-transform: uppercase;
}

.xsmall-title {
    font-weight: 400;
    font-size: 1.3em;
    text-transform: uppercase;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<section role="outer" class="bg-cover section section-fullWidthContent position-relative first">
  <div class="container">
    <div class="d-flex flex-row justify-content-between align-items-center">
      <h1 class="section-title">Title</h1>
      <a href="#" class="xsmall-title">See All</a>
    </div>
    <hr />
  </div>
</section>

Answer 3

Я добавил свойство align-items:baseline в класс обтекания, который, похоже, выполняет свою работу.