icon changing width when near inline element - html

Question

I have a list of users, with two inline elements: a "contact me" button ('a' element with a fontawesome icon) and a tag showing the type of user (span element).
Not all users have a tag, and whenever there is a tag, the 'a' element is giving to the icon more width than it needs. This is how it looks like:
As you can see, the bottom one fits correctly, while the blue space of the top one is bigger on the right. They have the exact same classes and attributes (this is generated from a loop, so it's the same code).
This is the HTML code for the link+span:
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I tried checking if there was any difference in the cumputed styles of the two elements through javascript (maybe there was a ":last-child" selector somewhere), but their maps looks exactly the same (checked using getComputedStyle on both elements).
Whenever I change the span element display property to block, flex, or other not-inline options, the other element resize itself in the correct way.
The only option I found is to change the icon width to .8em (currently 1em), and then add a last-child selector to resize it correctly to 1em when there is no span on the right, but it's not a real solution...
Could anyone help me figure out why, or at least how to fix it?

Answer 1

Set the display on item-btn-contact to inline-block. Seems like the default display of a (inline) is messing with the sizing.
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
display: inline-block;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>