Check out the image , and also view it with the help of dev tools. The issue at hand is that I'm struggling to align it in the same line as the text on the left and right sides. Here's the messy code snippet along with a disclaimer:
<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>
The classes "d-block" and "d-sm-flex" as well as "lead" are part of Bootstrap. Here is the corresponding 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 attempted adding
align-self: baseline;
to the ".bar" class and experimented with different margins and paddings but without success.