Padding mit Bindestrichen in html/css

Question

Ich habe einen Benutzerverwaltungsblock auf meiner Website und ich versuche, ein wenig Informationen dort anzuzeigen.
Ich denke, dass nichts besser ist als Beispiel mit Bildern. Dies ist
, wie der Block sieht jetzt:

Und das ist, wie ich der Block aussehen soll:

Gibt es eine gute Möglichkeit, das zu tun? Ich habe diese Striche manuell hinzugefügt, und das ist nicht die Art, die ich suche, Ich möchte es reagieren. Hier

ist der Blockcode:

<div class="account-box"> 
 
\t Welcome, guess. <br> 
 
\t <hr> 
 
\t Coins: <span style="float: right;">0</span> <br> 
 
\t Points: <span style="float: right;">0</span> <br> 
 
\t Total Referrals: <span style="float: right;">0</span> <br> 
 
\t <hr> 
 
\t Logged as [username] <span style="text-align: right;"><a href="/logout" class="btn btn-xs btn-danger"><span class="fa fa-sign-out fa-fw"></span>Logout</a></span> 
 
</div>

Answer 1

Vor kurzem hatte ich etwas Ähnliches zu tun. Hier ist, was ich kam mit:

.entry { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.entry>.spacer { 
 
    flex-grow: 1; 
 
    border-bottom: 1px dashed currentColor; 
 
    margin: 4px; 
 
}

<div class="entry"> 
 
    Label: 
 
    <ins class="spacer"></ins> 
 
    123 
 
</div>

Passen Sie nach Bedarf!