Выровнять текст разного размера снизу

Question

У меня есть два элемента div с текстом разных размеров, которые я хочу выровнять по низу.

Они успешно выровнены по низу своего родителя, но не выровнены равномерно друг к другу.

Это разрешимо?

.container {
  display: flex;
  height: 50px;
  background: pink;
}

.large, .small {
  align-self: flex-end;
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

<div class="container">
  <div class="large">Large</div>
  <div class="small">Small</div>
</div>

Answer 1

Согласно @Johannes answer хорошая идея - обернуть оба текстовых элемента в другой контейнер.Но вам не нужно объявление align-self: flex-end; для .inner-container, просто добавьте align-items: flex-end; к родительскому div.Таким образом, вы получаете на одно правило CSS меньше.

display: inline;, например display: inline-block, заставляет элементы выравниваться по их базовым линиям (на основе элемента с наибольшей высотой, в данном случае текст .large)) чтобы вы могли изменить <div class="large"> и <div class="small"> на span вместо div.Поскольку свойство отображения по умолчанию <span> является встроенным, вы можете пропустить объявление отображения .large и .small:

.container {
  display: flex;
  height: 50px;
  background: pink;
  align-items: flex-end;
}

.large, .small {
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

<div class="container">
  <div class="inner-container">
    <span class="large">Large</span>
    <span class="small">Small</span>
  </div>
</div>

Answer 2

Один из способов - поместить оба текстовых DIV в другую оболочку (.inner_container в моем фрагменте ниже), которая получает настройки, которые ранее имели тексты для выравнивания по дну, и применяет display: inline-block; к текстовым DIV:встроенные блоки по умолчанию выровнены друг с другом по своей базовой линии, чего вы хотите, если я правильно понимаю:

.container {
  display: flex;
  height: 50px;
  background: pink;
}

.inner_container {
  align-self: flex-end;
}

.large,
.small {
  display: inline-block;
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

<div class="container">
  <div class="inner_container">
    <div class="large">Large</div>
    <div class="small">Small</div>
  </div>
</div>