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

Question

У меня проблемы с выравниванием некоторых предметов. Рядом друг с другом в соответствии с дизайном, я перепробовал все, что знаю, и я не совсем уверен, как go о поиске в Google.

Также, если у вас есть какой-нибудь альтернативный способ сделать это, я ' Буду признателен за это. (Вся сторона с вкладками вещь)

Так что я сделал, это боковая панель позиционируется абсолютно

.side-tab{
    background: linear-gradient(90deg, rgba(2,2,25,0.9) 50%, rgba(255,255,255,0) 50%);
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 30em;
    padding-bottom: 15em;
}

Это будет вкладка для большой карусели с различными каруселями и заголовками и такими

<div class="side-tab row">
  <div class="tab-number col-md-6">
      <button class="tablinks" onclick="openTab(event, 'PRO')" id="defaultOpen">01</button>
      <button class="tablinks" onclick="openTab(event, 'CREAT')">02</button>
      <button class="tablinks" onclick="openTab(event, 'TIM')">03</button>
  </div>
    <div class="tab-title col-md-6">
        <button class="tablinks-title" onclick="openTab(event, 'PRO')" id="defaultOpen">PROFESSIONAL</button>
        <button class="tablinks-title" onclick="openTab(event, 'CREAT')">CREATIVITY</button>
        <button class="tablinks-title" onclick="openTab(event, 'TIM')">TIMELY</button>
    </div>
</div>

Так как бы я выровнять заголовок «Рядом с числами, если размер шрифта другой, или go обо всем этом более« соответствующим »образом

Answer 1

Вы можете установить высоту и высоту линий кнопок. Как то так:

.tablinks,
.tablinks-title {
    height: 70px;
    line-height: 70px;
}
.tablinks {
    font-size: 50px;
}
.tablinks-title {
    font-size: 25px;
}