JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="strict"> <span class="ffx-long-text">Well, here is quite a bit of text...</span>

    </div>
</div>

CSS

.strict {
    border: 1px solid #ccc;
    display: inline-block;
    margin-left: 6em;
    overflow: hidden;
    padding: 0.3em;
    white-space: nowrap;
    width: 120px;
}
.ffx-long-text {
    position: relative;
    transition: transform 5s ease-in-out, -webkit-transform 5s ease-in-out;
}

JavaScript

$('.ffx-long-text').on('mouseenter mouseleave', function (event) {
    var lt = $('.ffx-long-text')[0];
    var ltWidth = lt.offsetWidth;
    var container = lt.parentNode;

    console.log(event.type);

    if (event.type === 'mouseenter') {
        var move = container.clientWidth - ltWidth;

        lt.style.transform = lt.style.webkitTransform = 'translateX(' + move + 'px)';
    } else {
        lt.style.transform = lt.style.webkitTransform = 'translateX(0)';
    }
});