Как сверстать блок ширина которого будет подстраиваться от конца предыдущего блока до начала следующего блока?

Question

[sharpsss]

Доброго времени суток хабрчане, для начала думаю покажу что я делаю

вот то что я сделал - контейнер с

.pc_hidden{
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-top: 25px;
  margin-top: 15px;
  align-items: center;
  width: 100%;
  padding-bottom: 25px;
  background: #FCFCFC;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #333333;
}

линия вот таким образом

#title_lines{
 width: 27.20%;
height: 0px;
border-top: 2px solid rgba(0, 0, 0, 0.04);
transform: rotate(180deg);
}

<div class="pc_hidden">
		<div id="title_lines"></div>
		<div id="text">Номер заказа</div>
		<div id="title_lines"></div>
			<div>Дата</div>
	</div>

собственно проблема в том что я не понимаю как сделать так чтобы ширина линий подстраивалась под мои блоки с текстом типа margin-left первого текста допустим 15px (#text:nth-of-type(1) { margin:-left:15px} ) до этого место должно заполниться линией и т д типа как на скрине , я конечно могу просто каждый элемент с помощью nth-of-type обращаться и задавать ему ширину width, но что-то мне подсказывает что это не правильное решение.. памагити

Comments

[Ankhena]

id не могут дублироваться в рамках одной страницы.
И это не контентные линии, так что используйте псевдоэлементы.
transform: rotate(180deg); - боюсь спросить это зачем?

1. Рисуете линию градиентом по центру. Элементам задаете паддинги и фон.
2. Задаете линии псевдоэлементами для каждого элемента и позиционируете все это флексами или гридами. Между элементами не делаете отступов. Большой блок тоже флексами.

[sharpsss]

"transform: rotate(180deg); - боюсь спросить это зачем?" Fadsp[dsp[ds малёха лишнего скопировал с фигмы, бывает, кстати спасибо, даже не заметил этой щепотки безумия)9 сейчас вот подправил
То есть в процентах делаю линию и пэдинг лефтовый , бтв так я первоначально и делал но потом подумал что может как-то без псевдоэлементов обойтись, чтобы gap задал и они(блоки внутри контйенера с учётом gap) сами как-то рассосались под 100% ширину контейнера

[Ankhena]

sharp97, когда вы пишете комментарий без упоминаний, об этом никто не знает.

но потом подумал что может как-то без псевдоэлементов обойтись, чтобы gap задал и они(блоки внутри контйенера с учётом gap) сами как-то рассосались под 100% ширину контейнера

Я описала и такой вариант

[sharpsss]

Ankhena, тока щас прочёл первый пункт ,ашалеть это самое гениально и очевидное решение , как я сам не додумался, большой рахмет спосеба