phantom phantom - 5 months ago 27
CSS Question

Underline next to text keep them apart

I am trying to implement the following:

Enter image description here

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

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>