Ikonka vedle textu ktery je zarovnany doprava

Zdravim, potreboval bych poradit. Mam text - telefonni cislo, ktere je zarovnane jako text doprava a potrebuji vedle tohoto cisla umistit vlevo ikonku telefonu. Kod mam takto:

.customer-service-phone
{
text-align:right;
font-size:18px;
}

.phone-icon
{
float: left;
margin: 2px 6px 0 0;
}

<div class="customer-service-phone">
<img class="phone-icon" src="/phone.png" alt="" width=15px>
<p ><a href="tel:777777777">777 777 777</a></p>
</div>

Bohuzel to takto nefunguje. Text je vpravo a ikonka uplne vlevo na strance a ne vedle textu. Predem dekuji za pomoc.

Moc bych to s floaty už nehrotil jestli neděláte na něčem legacy. Už vašeho příkladu by mělo stačit nastavit kontejneru pevnou šířku, aby vám automaticky jako blokový prvek nenabral 100% šířky rodiče.

Codepen

Dekuji. Ale takto to mate taky cele vlevo, ja to potrebuji mit cele vpravo.

Vlevo mi to funguje, ale kdyz to dam doprava, tak mi tam skoci jen text, ale ikonka ne.

Toz to jste nerekl nebo jsem to nepochopil, ale to je detail, tak potom staci jen dat kontejneru v Penu "margin-left: auto;" .

Super, funguje. Dekuji moc.