Масштаб элемента относительно другого элемента

Question

У меня есть простой код для визуализации вывод запросов БД, где секции текстов отделены друг от друга линиями:

____________________ 
<p> Title1 <p> 
<span>blablablablablablablabla</span> 
____________________ 
<p> Title2 <p> 
<span>blablablablablablablablablablablablablablablabla</span> 

Как я могу адаптировать автоматически длину этих линий так что они будут до тех пор, как самой длинной строки на странице, как это:

________________________________________________ 
Title1 
blablablablablablablabla 
________________________________________________ 
Title2 
blablablablablablablablablablablablablablablabla 

Answer 1

Рассмотрим изменение разметки испуская <dl> вместо этого. Затем вы можете просто добавить верхнюю границу в заглавные записи вместо того, чтобы использовать кучу символов подчеркивания. Если вы примените display: inline-block к самому <dl>, он обрушится на ширину самого широкого элемента.

dl { 
 
    display: inline-block; 
 
} 
 
dt { 
 
    border-top: 1px solid #000; 
 
    font-weight:bold; 
 
} 
 
dd { 
 
    margin: 0; 
 
}

<dl> 
 
    <dt>Title1</dt> 
 
    <dd>blablablablablablablabla</dd> 
 
    <dt>Title2</dt> 
 
    <dd>blablablablablablablablablablablablablablablabla</dd> 
 
</dl>

Примечания: Я предложил <dl>, потому что это казалось лучше семантическим, пригодной для ваших данных (фиктивных). Тем не менее, вы могли бы, конечно, обернуть абзацы так:

.wrapper { 
 
    display: inline-block;   
 
} 
 
.wrapper p { 
 
    border-top: 1px solid #000; 
 
}

<div class="wrapper"> 
 
    <p>Title1<br>blablablablablablablabla</p> 
 
    <p>Title2<br>blablablablablablablablablablablablablablablabla</p> 
 
</dl>

Answer 2

Еще одна альтернатива ...

section { 
 
    display: inline-block; 
 
} 
 
section > div { 
 
    border-top: 2px solid orange; 
 
    display: block; 
 
} 
 
p { 
 
    font-weight: bold; 
 
}

<section> 
 
    <div> 
 
     <p>Title1</p> 
 
     <span>blablablablablablablabla</span> 
 
    </div> 
 

 
    <div> 
 
     <p>Title2</p>      
 
     <span>blablablablablablablablablablablablablablablabla</span> 
 
    </div> 
 
</section>