Having problem positioning span to be in line with text - html

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>