span元素与文本同行定位问题求助

我遇到了span元素无法与左右文本同行定位的问题，相关截图包含页面显示效果及开发者工具查看结果。

相关HTML代码（代码较为杂乱） #

<p class="lead posebne-ocene d-block d-sm-flex"><span class="kvalitet-usluga"></span>
Kvalitet Usluge
<span>
<span class="bar" style="background-color: #CBE8DA;"></span>
<span class="mala-ocena">20</span>
</span>
</p>

其中d-block、d-sm-flex和lead来自Bootstrap框架。

CSS代码如下： #

.bar {
        display: inline-block;
        width: 350px;
        /* margin-top: 2px;
        margin-right: 10px; */
        height: 20px;
}

.posebne-ocene {
    display: flex;
    position: relative;
    text-align: left;
    padding-left: 110px;
    justify-content: space-between;
}

.kvalitet-usluga {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 70px;
    background-position: center;
    background-image: url('../slike/Ikonice/kvalitetUsluga.svg');
    border-radius: 20px;
}

我尝试给.bar添加align-self: baseline属性，并调整边距和内边距，但均未解决问题。

内容的提问来源于stack exchange，提问作者Stefan