Ковыряние в CSS

Нужно два span блока с анимацией выровнять по вертикали. Почему-то один встаёт на место, а второй никак. На картинке видно, что второй блок сполз вниз. Кусок html кода:

<div class="webchat">
<span><i class="far fa-comment-dots"></i></span><a href="#" rel="nofollow" style="color: black;font-size: 14px;">Онлайн-консультант</a>
<span id="myuser"><i class="far fa-user-circle"></i></span><a href="/lk/" target="_blank" rel="nofollow" style="color: black;font-size: 14px;">Личный кабинет</a>
</div>

а это сам css:

.webchat {
display: table;
}

.fa-comment-dots {
color: #0098ff;
display: inline-block;
font-size: 20px !important;
line-height: 26px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
vertical-align: middle;
line-height: 20px;

}

.fa-user-circle {
color: #0098ff;
display: inline-block;
font-size: 20px !important;
line-height: 26px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
vertical-align: middle;
line-height: 20px;

}

.webchat span {
background-color: green;
display: inline-block;
margin: 19px 0px 0px 600px;
padding: 5px;
width: 25px;
height: 25px;
}

#myuser {
background-color: red;
display: inline-block;
margin: -100px 0px 0px 800px;
padding: 5px;
width: 25px;
height: 25px;
}
.webchat:hover > span i {
animation: 1200ms ease 0s normal none 1 running shake;
}

Такое ощущение, что margin для #myuser работать не будет, но почему, не очень понимаю. И как тогда написать css чтобы всё же попасть блоком в нужное место?