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

Question

[Hfnas]

<div class="crm-print-shipment-quality__block">
            <p class="crm-print-shipment-quality__line">Сохраняемость удобоукладываемости: <span>120
                мин</span>
        </div>

.crm-print-shipment-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;

Answer 1

[VoidVolker]

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