JSFiddle - React, Tailwind, and code Playground

by Zireael

HTML

<div id='HPcontainer' style='border: thin solid blue; height:20px; width:400px; background-color: OrangeRed;'>
<div id='currentHP' style='border: thin solid green; height:20px; width: 212px; background-color: green'>
</div>

</div>
max HP container with red background, and inside it, cotainer with current HP width with green background
<br>
<br>

<div id='currentHP2' style='border: thin solid green; height:20px; width: 112px; background-color: green; display:inline-block'>
</div><div id='missingHP2' style='border: thin solid green; height:20px; width: 288px; background-color: OrangeRed; display:inline-block'>
</div>
<br>
<br>
Two separate containers, stacked side by side, with width equal to current HP (green) and missing HP (red)
<br><br>

<div id='HPcontainer' style='border: thin solid blue; height:20px; width:400px; background-color: Gainsboro;'>
<div id='currentHP' style='border: thin solid green; height:20px; width: 212px; background-color: green'>
</div>

</div>
same as first version, but this time background is grey, so you see only current HP. Big container has a border, so you can assess how much total HP should be
<br>
<br>

CSS

div {
	margin:0;
	padding:0;
}