<p class="line"><span>Start Text here</span><b></b> <span>end text here</p>
<p class="line"><span>Start Text here</span><b></b> <span>end text here with more text</p>
<p class="line"><span>Start Text here</span><b></b> <span>end text here with even more text than the one above</p>
<hr>
<p class="line line1"><span>Start Text here</span><b></b> <span>end text here</p>
<p class="line line2"><span>Start Text here</span><b></b> <span>end text here</p>
.line {
  display: flex;
  align-items: center;
}
.line span:first-child {
  white-space: nowrap;
}
.line b {
  flex: 1 0 0;
  height: 2px;
  background: red;
  margin: 0 5px;
  min-width: 25px;
}
.line1 {
  width: 60%;
}
.line2 {
  width: 40%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.