Health bar in right side bar or in a status passage

Hey,

I'm trying to add a health and a mana bar to my game. The healthbar and manabar supposed to change their lengths when the $health and $mana values change. I have a "stowable" right side bar that uses the Sugarcube 2 style to open and close. Now, I simply add the HTML code as is:

<div class="health-bar" data-total="1000" data-value="1000">
  <div class="bar">
  	  <div class="hit"></div>
  </div>
</div>

to the story passage that is tasked to display status related data to the player. At this point I became to suspect that the structure of the HTML code (more precisely the class hierarchy) was not respected by SugarCube 2. This is because the result ended up being all over the place. Meanig that the elements did not line up on eachother rather got scattered.

Here's the CSS code:

health-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px;
  height: 20px;
  padding: 5px;
  background: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}
.bar {
  background: #c54;
  width: 100%;
  height: 10px;
  position: relative;
  
  transition: width .5s linear;
}

.hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  
  transition: width .5s linear;
}

This was obviously added to the stylesheet of the story. It addresses all 3 html elements that were declared above. We are creating a healthbar that plays a transition (we could call animation) that decreases the health bar over time leaving a lower opacity (shadow) of the health bar behind, which then aligns with the health bar that overlays it as it decreases.

Now the JavaCode is a macro that I simply add to a link and use it to decrease the health bar using a fixed value.

/% Main passage %/
<<decrease_HP>>

JS code:

// Reference the elements of the health bar
$(document).ready(function()
{
  var hitBtn = hBar = $('.health-bar'),
      bar = hBar.find('.bar'),
      hit = hBar.find('.hit');
}

// Define macro to test the health bar:
Macro.add( "decrease_HP",
 {
    handler : function(){
// grab HTML defined data values
var total = hBar.data('total'),
        value = hBar.data('value');
    
    if (value < 0) {
	// we are dead transition to game end
      return;
    }
    // max damage is essentially quarter of max life
    damage = 100;
    var newValue = value - damage;
    // calculate the percentage of the total width
    var barWidth = (newValue / total) * 100;
    var hitWidth = (damage / value) * 100 + "%";
    
    // show hit bar and set the width
    hit.css('width', hitWidth);
    hBar.data('value', newValue);
    
    setTimeout(function(){
      hit.css({'width': '0'});
      bar.css('width', barWidth + "%");
    }, 500);
    
    if( value < 0){
      // dead, dead and dead, go to Game End
    }
}
  });

Now, the code will most likely not work, because I've just written it on my phone without syntax check or linting. I only wanted to provide as much info as I could out of the top of my head until I get back to my computer.

Anyways, I have two problems with my solution:
1. The health bar HTML elements are not aligned as they are supposed (on top of eachother overlaying one another) instead they are rendered below eachother. I suspect there's a better way to define HTML in sugarcube passages, but no idea how.

2. The health bar does not react to value change, meaning the transition can't be seen nor the result of the transition (a lower health value presented on the health bar). Now, the transition part is not that important to me, but I at least want to see the results of a decreased health bar in my RightSideBar passage.

Any help would be welcome!
Thank you!