Así que he estado probando el uso de barras de estado con JavaScript y me he encontrado con este problema en el que parece que cuando uso "display:inline-block" no alinea mis dos elementos correctamente. Cuando se ejecutó, la "Estadística:" aparece más abajo que la barra de progreso, aunque deberían estar alineados. Cualquier ayuda o alguien que señale un error tonto sería apreciado.

 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>