So I have been trying out using status bars with JavaScript and have come across this issue where it seems like when I use "display:inline-block" it doesn't align my two elements properly. When ran the "Stat:" appears lower than the progress bar even though they should be aligned. Any help or someone pointing out a dumb mistake a made would be appreciated.
document.getElementById("myBar").style.width = "50%";#myProgress {
width: 20%;
background-color: #ddd;
display: inline-block;
}
#myBar {
width: 1%;
height: 30px;
background-color: #04AA6D;
}
h1 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
display: inline;
}<h1>Stat:</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>