JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li id="facebook"><img id="icon" src="facebook.png" width="13" height="13" alt="" /><a href="#">FACEBOOK</a></li>
</ul>

<!-- Если мы к #icon добавим - float: left, то действие margin-top будет распространяться только на иконку фэйсбук, что в принципе было бы логично, а так марджин действует и на текст ссылки и на иконку. Пожалуйста, подскажите решение без использования float. Может быть через display как-то? Просто в конечном коде гораздо больше наворотов, и использование float не возможно. Конечная цель - выровнять иконку и текст по вертикали через отступы-->

CSS

#facebook {
    width: 100px;
    height: 30px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 8pt;
    text-align: center;
    background-color: #999;
    list-style: none;
}
#facebook a {
    margin: 0;
    border: 0;
    padding: 0;
    text-decoration: none;
    color: #fff;
}
#icon {
    margin-top: 10px;
    margin-right: 3px;
}