I attempted to design a button that includes both a label and a numerical value.
To create space between the label and the number, I used padding. However, when the number is large, it ends up overlapping the label.
Is there a method to center the label on the button and ensure that the button remains fully responsive regardless of the displayed number?
DEMO
Html
<div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">
<a style="color: #51CC8B;" class="btnP">Prepared
<span class="nav-link btn-glyphicon1">1500</span>
</a>
</div>
Css
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
outline: none;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
right: 0;
position: absolute;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #51CC8B;
}
https://i.sstatic.net/N09Yd.png
PROBLEM
https://i.sstatic.net/x46Si.png
As depicted in the image, the number overlaps the label :( I am looking for a solution where the text always stays centered on the button and adjusts its width based on the number size.
Any assistance would be appreciated!