JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/julen/odometer/added-event/odometer.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/julen/odometer/added-event/themes/odometer-theme-default.css">
<div id="navbar">
    <div>Score:</div>
    <div class="odometer">9</div>
    <div>Log Out</div>
</div>
<p>
    <button id="add">Add some</button>
</p>

CSS

#navbar > div {
    display: inline-block;
}
.odometer {
    background-color: #000;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    transition: 2s width ease;
    margin: 0 0.25em;
}
.odometer-inside {
    float: right;
}

JavaScript

var oldWidth = -1;
var timer;
var number = 9;
var $odometer = $('.odometer');


var updateWidth = function (e) {
    clearInterval(timer);
    timer = setInterval(function () {
        var newWidth = $odometer.find('.odometer-inside').width();
        if (oldWidth !== newWidth) {
            console.log('updating width to', newWidth);
            $odometer.css('width', newWidth);
            oldWidth = newWidth;
        }
        clearInterval(timer);
    }, 100);
};

updateWidth(); // Set initial width
$odometer.on('odometer-digit-added', updateWidth);

$('#add').on('click', function () {
    var n = Math.floor((Math.random() * 20) + 1);
    number = number + n;
    $odometer.text(number);
});