I have a group of individuals listed, each with two elements side by side: a "contact me" button (an 'a' element with a fontawesome icon) and a tag displaying the user type (span element). Some users do not have a tag, and when there is one present, the width of the icon in the 'a' element appears to be wider than necessary. Here is an example of how it appears:
https://i.sstatic.net/iKHja.png
As shown, the bottom user fits correctly while the top user has excess blue space on the right. Both users share the same classes and attributes since they are generated from the same loop.
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">
<a href="">xxxx</a>
<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">
<a href="">xxxx</a>
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>I attempted to inspect if there were any variations in the computed styles of the two elements using javascript (considering the possibility of a ":last-child" selector), but both elements had identical maps (verified with getComputedStyle on both).
Whenever I modified the display property of the span element to block, flex, or other non-inline options, the other element resized correctly.
The only temporary solution I found was decreasing the icon width to .8em (currently set at 1em) and then implementing a last-child selector to resize it back to 1em when no span is present on the right. However, this isn't an ideal fix...
Could someone assist in identifying the cause or providing guidance on how to rectify this issue?