Image position inside pill element - css

Question

I need the image to be sticked to left and occupy entire corner without taking spacing in top and bottom.Below is the CSS used for the chip and for the image inside chip.
.imgDiv{
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
width: fit-content;
border-radius: 25px;
background-color: #f1f1f1;
}
.img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}

Answer 1

You can do it easily and purely with CSS flexbox:
.UserPill {
display: inline-flex;
align-items: center;
border-radius: 6em;
padding-right: 0.5em;
background-color: #f1f1f1;
font: 16px/1.6 sans-serif;
gap: 10px;
}
.UserPill-img {
height: 2.4em;
width: 2.4em;
object-fit: cover;
border-radius: 50%;
}
.UserPill-remove {
border: 0;
cursor: pointer;
background: transparent;
}
<div class="UserPill">
<img class="UserPill-img" src="https://picsum.photos/id/237/100/100">
<span class="UserPill-name">Chris Morris</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
<div class="UserPill">
<img class="UserPill-img" src="https://i.stack.imgur.com/qCWYU.jpg?s=328&g=1">
<span class="UserPill-name">Roko</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
<div class="UserPill">
<img class="UserPill-img" src="https://lh6.googleusercontent.com/-IdYKeLCNsyQ/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmgTYg8zk2oLDC9ZC0NM8sFu23r3g/s96-c/photo.jpg?sz=328">
<span class="UserPill-name">Anto Clinton</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>
<div class="UserPill">
<img class="UserPill-img" src="https://i.stack.imgur.com/MGiQc.jpg?s=128&g=1">
<span class="UserPill-name">Amirreza Amini</span>
<button class="UserPill-remove" type="button" arial-label="Remove">✖</button>
</div>

Answer 2

I could get what you mean a bit. I think you want something like this. I don't know why you applied padding to .imgDiv, I deleted that. I think you applied it because of the width, use width instead.
.imgDiv {
display: inline-block;
/* EDITED HERE (USE WIDTH INSTEAD)
padding: 0 25px;*/
height: 50px;
font-size: 16px;
line-height: 50px;
/* RIGHT DOWN BELOW */
width: 200px;
border-radius: 25px;
background-color: #f1f1f1;
}
.img {
float: left;
/* EDITED HERE (DELETED)
margin: 0 10px 0 -25px; */
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class='imgDiv'>
<img src='https://picsum.photos/200/300' class='img'>
<span>Chris Moris</span>
<span>✕</span>
</div>