Having problem positioning span to be in line with text

Question

Here is the image , and the image with dev tools The problem is That I can't position it to be in the same line as text left and right of it, Here is the code, and disclamer it's VERY MESSY

<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" and :d-sm-flex" and "lead" is from bootstrap Here is the 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;
}

I tried adding

align-self: baseline;

to the ".bar" and playing around with margins and padding but no luck

Answer 1

Add a class name to your outer span which wraps the two other span elements and also use flexbox and align-items: center;. I added an example below:

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

.posebne-ocene {
    display: flex;
    position: relative;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.wrapper {
    display: flex;
    align-items:center;
}

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