Repositioning % next progress bar

Question

I'm having trouble trying to position the percentage value next to the progress bar in the code repo challenge for CSS. It currently outputs the percentage below the progress bar and I'm stuck figuring out how to align that progress bar evenly between the "Skill" and "%". Any help is appreciated.

HTML:

<div class="skills">
<ul>
<li>
<div class="skill_name">
Skill 1
</div>
<div class="skill_prog">
<span style="width: 80%;"></span>
</div>
<div class="skill_per">80%</div>
</li>
<li>
<div class="skill_name">
Skill 2
</div>
<div class="skill_prog">
<span style="width: 70%;"></span>
</div>
<div class="skill_per">70%</div>
</li>
<li>
<div class="skill_name">
Skill 3
</div>
<div class="skill_prog">
<span style="width: 90%;"></span>
</div>
<div class="skill_per">90%</div>
</li>
</ul>
</div>

CSS:

.subheading {
font-size:20px;
font-weight:bold;
color:2F5A78;
text-transform: uppercase;
padding-left: 16px;
}

.skills ul {
list-style: none;
}

.skill_prog{
width: 60%;
height: 5px;
position: relative;
}

.skill_prog span {
position: absolute;
height: 100%;
background: #2F5A78;
padding-right: 50px;
}

.skill_per {
margin-right: 15px;
}

Answer 1

.skill_per {
display: inline;
}

.skill_name {
display: inline;
}

https://www.sololearn.com/compiler-playground/WL3Hca4XDcT8