CODEWITHSUNDEEP
htmlcss
user3241376
user3241376

Reputation: 417

Scale element relatively to another element

I have a simple html code for rendering the output of the DB querying, where sections of texts are separated by lines:

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

How can I adapt automatically the length of these lines so that they would be as long as the longest line on the page, like this:

________________________________________________
Title1 
blablablablablablablabla
________________________________________________
Title2
blablablablablablablablablablablablablablablabla

Upvotes: 1

Views: 85

Answers (2)

canon
canon

Reputation: 41665

Consider changing your markup by emitting a <dl> instead. Then you can simply add a top border to the title entries instead of using a bunch of underscores. If you apply display: inline-block to the <dl> itself, it will collapse to the width of the widest item.

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>

Note: I suggested a <dl> because it seemed like a better semantic fit for your (dummy) data. That said, you could certainly wrap your paragraphs like so:

.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>

Upvotes: 7

isherwood
isherwood

Reputation: 61036

Another alternative...

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>

Upvotes: 0

Related Questions