Witam, robię design paska xp i chcę zrobić postęp, czyli ile ma obecnie xp oraz ile mu brakuje do następnego poziomu. Jak przesunąć div'a na drugi koniec rodzica bez użycia transform: translate albo marginów
<div class="xp-progress">
<div class="current-xp">0</div>
<div class="xp-u-need-to-earn">1000</div>
</div>
.xp-progress {
width: 100%;
height: 30;
background: #0064b1;
border-radius: 3px;
display: flex;
flex-direction: row;
align-items: center;
padding: 2px;
}
.current-xp {
font-size: 14px;
width: auto;
height: auto;
margin-left: 5px;
}
.xp-u-need-to-earn {
font-size: 14px;
width: auto;
height: auto;
margin-right: 5px;
}
Na zdjęciu użyłem transform: translate, żeby zobrazować jak ma to wyglądać