JSFiddle - React, Tailwind, and code Playground

HTML

<div id='thermometer'>
    <div id='level'>
    </div>
</div>

<br>
Type a number between 0 and 100: <br>
<input type='text' id='fill'>

CSS

#thermometer { height: 15px; width: 100px; margin:5px; padding:0; border: #cccccc solid 1px; }

#level { height: 15px; width: 40px; margin: 0; padding:0; border-right: 1px solid #666666; background: #ffcccc; }

JavaScript

$('#fill').keyup(function() {
    $('#level').css('width',this.value);
});