Wie halte ich ein HTML-Tag auf der rechten Seite?

Question

Mein Ziel ist einfach, kleben Sie das P-Tag auf der rechten Seite der benutzerdefinierten CSS-Karte, um es auf der linken Seite zu bleiben, ist es ziemlich einfach.

custom-text { 
    margin-left: 30px; 
} 

besser zu veranschaulichen diese

Die Frage ist, wie kann ich die $ 100 Dollar auf der rechten Seite bleiben immer? und lassen Sie sagen, der Wert der Dollar zu 5 $ ändern, wie man es immer auf der rechten Seite macht?

kann ich nur

custom-text-right { 
    margin-left: 450px; 
} 

aber diese Lösung skaliert nicht auf anderen Wert (Im Bootstrap mit nur zur Information)

HTML-Teil:

<h4>Price: <span class="dollar">$3.15</span></h4> 

Answer 1

können Sie tun, dass Flexbox verwenden, mit justify-content: space-between;

.card { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 500px; 
 
    background: #000; 
 
    justify-content: space-between; 
 
    color: white; 
 
    padding: 30px; 
 
    box-sizing: border-box 
 
}

<div class="card"> 
 
    <span>Price:</span> 
 
    <span> $100</span> 
 
</div>

Answer 2

können Sie verwenden Sie float: rechts oder text-align: rechts