strech two lines to same length? - css

Question

I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?

Answer 1

You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>

Answer 2

You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>