Background img width controlled by text inside. Height stays static - html

Question

I'm trying to make a div with the background img of a bubble that have the count of comments on a post inside it. I want the width to be controlled by the text inside while the height of the div should stay static so I can keep the text inside centered verticaly.
What I have now is the code under here. It looks ok when the value inside is a 3 digit number, but if I change it to a 2 digit number or anything other then a 3 digit number the bubble moves verticaly and horizontaly so the text is not centered anymore.
#wrapper {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
min-width: 100%;
align-items: baseline;
}
#comment_text {
display: flex;
font-weight: bold;
}
#comment_img {
display: flex;
background: url('https://rajohan.no/img/icons/picons_basic_1/SVG/basic1-021_chat_comment_bubble.svg');
background-repeat: no-repeat;
background-size: 100%;
padding: 21px;
margin-left: 10px;
}
#comment_count {
display: flex;
font-weight: bold;
}
<div id="wrapper">
<div id="comment_text">
COMMENTS
</div>
<div id="comment_img">
<div id="comment_count">
160
</div>
</div>
</div>

Answer 1

Try adding background-position:center - this centers the background image horizontally as the element changes width. I think that's what you're trying to achieve.
#wrapper {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
min-width: 100%;
align-items: baseline;
}
#comment_text {
display: flex;
font-weight: bold;
}
.comment_img {
display: flex;
background: url('https://rajohan.no/img/icons/picons_basic_1/SVG/basic1-021_chat_comment_bubble.svg');
background-repeat: no-repeat;
background-position: center;
padding: 21px;
margin-left: 10px;
}
.comment_count {
display: flex;
font-weight: bold;
}
<div id="wrapper">
<div id="comment_text">
COMMENTS
</div>
<div class="comment_img">
<div class="comment_count">
16
</div>
</div>
<div class="comment_img">
<div class="comment_count">
160
</div>
</div>
</div>

Answer 2

I have added some code in your #comment_count.
#wrapper {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
min-width: 100%;
align-items: baseline;
}
#comment_text {
display: flex;
font-weight: bold;
}
#comment_img {
display: flex;
background: url('https://rajohan.no/img/icons/picons_basic_1/SVG/basic1-021_chat_comment_bubble.svg');
background-repeat: no-repeat;
background-size: 100%;
padding: 21px;
margin-left: 10px;
}
#comment_count {
display: flex;
font-weight: bold;
min-height: 20px;
min-width: 25px;
justify-content: center;
}
<div id="wrapper">
<div id="comment_text">
COMMENTS
</div>
<div id="comment_img">
<div id="comment_count">
160
</div>
</div>
</div>
<div id="wrapper">
<div id="comment_text">
COMMENTS
</div>
<div id="comment_img">
<div id="comment_count">
22
</div>
</div>
</div>