html5 progress css,html - Vertical CSS/HTML5 progress bar - Stack Overflow

I don't know if this is what you need but:

You can change the height of css rule .score-completed div from percentage (currently 50%) to fixed height with px (for this example 40px). Then when you have to make bigger the green bar you can add pixels in the height and delete the same amount of pixels from margin (currently 99px).

For example if you want the height to be 49px then the margin must be 90px (-9 pixels because you added in the height).

edit: you can add an id to each div with the bar and then create a css rule.

For example:

Then you remove the height and margin:99px from your .score-completed div and create new css rules for each bar for example:

#first {margin:99px 1px 0 0; height:40px; }

#second {margin:90px 1px 0 0; height:49px; }