Scoreboard design using HTML and CSS - html

Question

I m trying to design a score board in following manner:
0 - 0
Home - Away
Now the issue happening here is the if the length of name of Home team is bigger, it pushing the - further. I want - to be aligned with the - in the score above. my html structure is something like following:
<div className="score">
<span>0</span>-<span>0</span>
</div>
<div className="team">
<span>{homeName}</span>-<span>{awayName}</span>
</div>
I have tried putting direction property to the span to use rtl. I also tried providing text-align center and putting the position property as fixed. but it didnt work. Not sure if I m going right here or not. Any help is appreciated

Answer 1

If you can add an extra wrapper you can simply use display:table
.main {
display: table;
}
.score,
.team {
display: table-row;
}
span {
display: table-cell;
}
span:first-child {
text-align: right;
padding-right: 10px;
position: relative;
}
span:last-child {
text-align: left;
padding-left: 10px;
}
/*the line between scores*/
span:first-child::before {
content: "-";
position: absolute;
right:-2px;
top: 0;
}
<div class="main">
<div class="score">
<span>0</span><span>0</span>
</div>
<div class="team">
<span>Home</span><span>away</span>
</div>
</div>
<div class="main">
<div class="score">
<span>0</span><span>0</span>
</div>
<div class="team">
<span>Home Home Home</span><span>away</span>
</div>
</div>

Answer 2

You can do something like this, but you always have number of other ways to style as you need.
<div class="main">
<div class="home-screen">
<p> 0 </p>
<p> Home </p>
</div>
<div> - <div>
<div class="away-screen">
<p> 0 </p>
<p> Away </p>
</div>
</div>
style.css
.main {
display: flex;
flex-direction: row;
}