Как правильно сверстать на flexbox данный блок?

Question

[Илья Резник]

Собственно вот скрин блока. Как правильно сверстать на flex, чтобы полоса между текстом была резиновой в зависимости от занятого места текстом?

Текст слева выровнен по левому краю, текст справа, соответсвенно по правому краю.

Comments

[Neyury]

Помимо flexbox можно использовать бордер у контейнера(с помощью псевдоэлементов или так), и белый фон у внутренних элементов

[Илья Резник]

Neyury: решение я находил с помощью псевдоэлементов, но решил, что пора двигаться вперед, спасибо!)

Answer 1

[GreatRash]

codepen.io/GreatRash/pen/ENWvrK

Comments

[Илья Резник]

Да, все сработало, большое спасибо!
Если не сложно, могли бы пояснить.
Дивам с текстам мы задали уменьшение через flex: 0 1 auto, а линии задали увеличение flex: 1 таким образом просто задаем приоритетность размера элементам - я правильно понял?

[zooks]

Ужасный HTML. Здесь нужен либо маркированный список, либо табличка.

[dhat]

zooks: какая разница???

[dhat]

Илья Резник: flex-grow: 0 занимает только столько места, сколько контента, а значение 1 - растягивает на всю ширину контейнера

[GreatRash]

zooks: Судя по контексту, этот блок нужен для сайта, занимающегося чем-то, связанным со строительством. По этому семантической ценности для поисковика он не несёт ну вообще никакой (если только они там не продают арматуру и бетон, в чём я сильно сомневаюсь). А значит вообще по барабану какие DOM-элементы использовать (уж точно не таблицу).

Не стоит лишний раз надрачивать на семантику.

[zooks]

GreatRash: не соглашусь, куча дивов - не работа. Хотя для примера может и сойдет.

[GreatRash]

zooks: Отличный аргумент, браво!