Как сделать подчеркивание, как на картинке?

Question

[Hfnas]

<div class="crm-print">
            <p class="quality__line">Сохраняемость  <span>120
                мин</span>
        </div>

quality__line span{
      display: inline;
      border-bottom: 1px solid #000;
}

Не получается, как на картинке, подчеркивает только текст, а надо, чтобы подчеркивалло до границы, как на рисунке.

Comments

[Adamos]

1. Распечатать формуляр.
2. Подтереться и выкинуть.
3. Сверстать нормальное, читаемое, без оглядки на писцов (например, выделяя введенные значения полужирным).
4. Получить благодарность тех, кто с этим работает - или выговор тех, кто этим руководит. Тут как повезет.

[Hfnas]

Adamos, хорошо, спасибо, а если в две строчки будет 120мин?

[Adamos]

Hfnas, ну, это непорядок. Лучше в три, конечно.

[Danny Arty]

Жесть насколько люди обленились, что даже такие простые вопросы спрашивают. Самая база:
1) span - инлайновый элемент, а это значит, что его размеры определяются содержимым. Отсюда еще вопрос, зачем добавлять display:inline; если он итак задан по умолчанию
2) Учитывая задачу следует, что span должен растянуться, значит перестать быть инлайновым элементом. Отсюда следует, что удобное решение - задать родительскому элементу display: flex;, а span-у flex-grow: 1;

[Анастасия Севко]

Да, тут дело в свойствах блока,
Можно так, как вариант - https://codepen.io/nanandro1/pen/MYYdQXg
Добавить класс к спану, задать нужную ширину в пикселях или процентах и сказать им будьте оба inline-block

Answer 1

[VoidVolker]

Дык растянуть же элемент на всю доступную ширину.

Answer 2

[Kotaro Hiba]

Display inline заменить на display block или flex, если нужно что бы два блока оставались на одной строке, родительскому контейнеру установить display flex

Answer 3

[SlavaVSLK]

На крайняк можно псевдоэлемнтом сделать, зависит от контекста задачи в целом

Answer 4

[apoca1ipsis]

.quality__line {
  display: flex;
  flex-wrap: wrap;
}

.quality__line span {
  flex: 1 1 auto;
  border-bottom: 1px solid #000;
}

тык