<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.