HTML/CSS Make a Progress Bar - html

Question

I am trying to make a progress bar as is shown here in the about section however I am just lost.
I can make a bar and a box but neither look anywhere near as good as that and I cannot for the life of me get them to be beside each other with equal height. I just keep getting something along the lines of
What I am trying to achieve in case website goes down:
.myskills {
width: 45vw;
height: 100%;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
justify-content: center;
height: 2vh;
}
.skillName {
background-color: blue;
width: 5vw;
float: left;
height: 100%;
font-size: 2em;
}
.meter {
float: left;
width: 80%;
height: 100%;
/* Can be anything */
position: relative;
background: #555;
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: hotpink;
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"></span>
</div>
</div>
</div>

Answer 1

This code below will give you the percentage sign on the right of the percentage bar. A lot of this is purely layering with hmtl/css.
Here are some links for layering and z-index:
https://www.tutorialspoint.com/css/css_layers.htm#:~:text=The%20CSS%20layers%20refer%20to,element%20should%20come%20at%20bottom.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
https://css-tricks.com/almanac/properties/z/z-index/
.myskills {
width: 90%%;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
}
.skillLevel{
right: 0;
font-size: 1.7em;
position: absolute;
}
.skillName {
background-color: rgb(77, 252, 208);
float: left;
font-size: 2em;
}
.meter {
float: left;
width: 100%;
/* Can be anything */
position: relative;
background: rgb(218, 217, 217);
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: rgb(31, 134, 117);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"><span class="skillLevel">90%</span></span>
</div>
</div>
</div>

Answer 2

Well, IMO you should use less vh and vw. Your font simply defines the height and the width of the text part. By removing them, you get something as you want as I understood (I also removed useless properties) :
.myskills {
width: 45vw;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
}
.skillName {
background-color: blue;
font-size: 2em;
}
.meter {
float: left;
width: 100%;
/* Can be anything */
position: relative;
background: #555;
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: hotpink;
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"></span>
</div>
</div>
</div>
Now, if it was my progress bar I'd use flex instead of width for .meter, I'd take a smaller font size and put padding to the text :
.myskills {
width: 45vw;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
}
.skillName {
background-color: blue;
font-size: 18px;
padding: 3px 10px;
}
.meter {
float: left;
flex: 1;
/* Can be anything */
position: relative;
background: #555;
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: hotpink;
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"></span>
</div>
</div>
</div>