Responsive button - With name and number - html

Question

I tried to create a corresponding button that contains the name of the button and a number.
I used padding to separate the button name from the number, however when the number is very high, that same number overlaps the button name.
Is there a way to center the name on the button and make the button fully responsive regardless of the number displayed?
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;
}
PROBLEM
As you can see in the image, the number overlaps the name :( I want the text to always remain centered on the button and the width to adjust according to the size of the number.
Can someone help me?

Answer 1

.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;
justify-content: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;
border-radius: 16px;
align-items:center;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
margin-left:20px;
color: #51CC8B;
}
<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>