I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name lengths. I've tried adding margin-right, padding-right, and aligning to the right in the style of the first div, but nothing seems to work as the buttons remain in their original position.
https://i.sstatic.net/AfwBs.png
html:
<div>
<li class="list-group-item d-flex justify-content-between lh-sm">
<h6 class="my-0" style="size: 10px;">{{ item.name }}</h6>
<div>
<a class="fab-button red bg-success" style=" float:right;">
<div class="plus"></div>
</a>
<a style="float:right; size: 20px; padding-right: 2mm; padding-left: 2mm;">
<strong>{{count}}</strong>
</a>
<a class="fab-button red bg-success" style=" float:right;">
<div class="minus"></div>
</a>
</div>
<span class="text-muted">
{{ item.price }} zł
</span>
</li>
</div>
css:
.fab-button {
border-radius: 50%;
display: table;
}
.fab-button div {
background: rgb(0, 0, 0);
margin: 11px;
}
.fab-button .plus {
width: 4px;
height: 4px;
box-shadow: 0 0 rgb(0, 0, 0), 0 -3px rgb(0, 0, 0), 0 3px rgb(0, 0, 0), -3px 0 rgb(0, 0, 0), 3px 0 rgb(0, 0, 0), 0 -6px rgb(0, 0, 0), 0 6px rgb(0, 0, 0), -6px 0 rgb(0, 0, 0), 6px 0 rgb(0, 0, 0);
}
.fab-button .minus {
width: 4px;
height: 4px;
box-shadow: 0 0 rgb(0, 0, 0), -3px 0 rgb(0, 0, 0), 3px 0 rgb(0, 0, 0), -6px 0 rgb(0, 0, 0), 6px 0 rgb(0, 0, 0);
}