Как вариант, можно сделать через псевдоэлемент, чтобы не загрязнять разметку лишними сущностями, учитывая тот факт что эта линия - больше украшательство, чем что-то более серьезное и требущее отдельных элементов.
Вот пример:
<div class="block">
<span class="title">Hello World</span>
<span class="value">999999</span>
</div>
.block {
display: flex;
align-items: baseline;
}
.block::after {
background: #4a4a4a;
height: 3px;
content: "";
flex-grow: 1;
}
.value {
order: 3;
}
При желании можно заменить псевдоэлемент, например на тег span.
Есть конечно ещё и другие варианты, например задать border-bottom родителю, а дочерним элементам прописать однотонный фон, чтобы он закрыл собой линию снизу и это собственно говоря и создаст эффект как на картинке(плюс-минус добавить дополнительные стили), но это наверное не столь красиво и аккуратно, выглядит, если сравнивать с первым вариантом.
Простой
Простой
