Underline next to text keep them apart

Question

I am trying to implement the following:

You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.

See code below as to how I have implemented this. Perhaps I should be taking a different approach.

Also, a jsfiddle here for your convenience.

h3 {
  font-size: 26px;
  color: #000 !important;
  max-width: 90px;
  display: inline-block;
  padding-bottom: 15px;
  width: 8%;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: 90%;
}

<h3>Test Border</h3>
<div class="underline"></div>

Answer 1

Try the below CSS:

h3 {
  font-size: 26px;
  color: #000 !important;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  border-bottom: 1px solid #C6BCB6;
  width: 90%;
}

Answer 2

I'd probably use flex box like this.

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 10px;
  transform: translate(0, -6px);
}

<div class="border">
  <span class="string">Test String</span>
  <div class="line"></div>
</div>

This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.

Here's what it looks like with paragraphs between each header (an almost real world example)

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 5px;
  transform: translate(0, -6px);
}

<div class="border">
  <span class="string">Lorem ipsum dolor</span>
  <div class="line"></div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
  sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
  sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
  magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
  <span class="string">Etiam quis molestie</span>
  <div class="line"></div>
</div>
<p>
  Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
  dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
  tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
  <span class="string">Phasellus sed orci</span>
  <div class="line"></div>
</div>
<p>
  Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
  lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
  ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
  commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
  <span class="string">Fusce ultricies ante</span>
  <div class="line"></div>
</div>
<p>
  Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
  tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
  viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
  nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>

Answer 3

When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less. You can use calc to solve this issues:

h3 {
  font-size: 26px;
  color: #000 !important;
  width: 95px;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: calc(100% - 100px);
}

<h3>Test Border</h3>
<div class="underline"></div>

Answer 4

You can try calc() property and it will work...

Check this fiddle here

What you have to do,

h3 {
    font-size: 26px;
    display: inline-block;
    max-width:90px;
    margin-right:10px;
}

.underline {
    display: inline-block;
    border-bottom: 1px solid #c6bcb6;
    width: calc(100% - 104px);
}

Answer 5

I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:

.textline {
  display: table;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  display: table-cell;
  width: 9%;
  margin-right: 1%;
  vertical-align: bottom;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6;
  width: 90%;
  position: relative;
  top: -7px;
}

<div class="textline">
  <h3>Test border</h3>
  <div class="underline"></div>
</div>

Answer 6

You could try using a table display, with the text and line each having their own cell:

<div class="div-row">
    <div class="div-cell"><h3>Test Border</h3></div>
    <div class="div-cell underline"></div>
<div>

CSS:

.div-row  {
    display: table-row;
    width: 100%;
}

.div-cell {
    display: table-cell;
}

I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).

If you want, you could also set a fixed width to the div containing the text.

Answer 7

You can display both blocks as table and specify first block fixed width (as it's only text that does not change).

.wrapper {
  display: table;
  width: 100%;
  vertical-align: bottom;
  padding-bottom: 15px;
  table-layout: fixed;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  max-width: 90px;
  display: table-cell;
  width: 85px;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6;
  width: 100%;
  position: relative;
  top: -12px;
}

<div class="wrapper">
  <h3>Test Border</h3>
  <div class="underline"></div>
</div>