字体真棒图标不会移动

Question

所以我的回复图标的位置在字体太棒时有点问题。我一直试图将其放置在我的心脏图标旁边，但没有用。它只是位于div的角落，我尝试过使用移动它的方法，但是vertical-align: middle和我在其他文章中阅读的其他技术在我的情况下不起作用。

这是div的外观：

                        <div class="bubble sender first animate-bottom">
                            <li class = "display" style = "color = white"> tkjfjk fjkg gfkjgdj gjkd reyk gklfg kgldg gfdklgd gkdlgd way &nbsp; &nbsp;
                                <i class="fas fa-heart liked" aria-hidden="true"></i> <sub>6</sub>&nbsp; &nbsp; &nbsp; &nbsp;
                                <i class="fa fa-reply reply" aria-hidden="true"></i>
                            </li>
                            <br>
                            <span

从逻辑上讲，它应该处于正确的位置，但实际上并非如此。任何帮助，将不胜感激。

JS小提琴在这里：https://jsfiddle.net/eam6yq28/