Как поправить ширину инлайн элемента по контенту при переносе текста?

Question

[Alexandr Mi]

Элемент h1, его родительский блок имеет свойства:

{
  display flex;  
  flex-direction: column;
}

а сам элемент имеет свойство:

{
  align-self: flex-end;
}

что обязано располагать данный элемент у правого края экрана.
Все так и работает:

пока не происходит перенос текста:

этот перенос делает ширину элемента 100% и тем самым заставляет его прижаться в левому краю экрана, а мне необходима вот такая верстка:


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

Answer 1

[Alexandr Mi]

Нашел еще вариант:
добавить тег br.hero__line-break со свойством "display: none";
и при необходимых размерах экрана:
добавляем медиа запрос, в котором изменяем видимость .hero__line-break на "display: block";
Вариант костыльный, но вполне рабочий, с ним нет необходимости подбирать ширину блока, он явно обрезается с помощью br
https://codepen.io/missing00/pen/OZabbm