JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <button onclick="toggleTransition()">Toggle Transition</button>
    <div class="field" id="example">
        <span class="verse-one scrollable_section">
            I am the very model of a modern major general.
            Ive information vegetable animal and mineral.
            I know the kings of england and quote the fights historical
            from marathon to waterloo in order categorical.

        </span>
        <span class="verse-two scrollable_section">
            I am very well acquainted too with matters mathematical.
            I understand equations both the simple and quadratical.
            About binomial theorem I am teeming with a lot of news.
            With many cheerful facts about the square of the hypotenuse.
        </span>
    </div>
    </body>

CSS

html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #333;
            font-family: 'Lato', sans-serif;
        }

        .scrollable_section {
            width: 125px;
            /* Set a specific width for the spans */
            overflow-x: auto;
            /* Enable horizontal scrolling */
            overflow-y: hidden;
            /* Hide vertical scrollbar */
            white-space: nowrap;
            /* Add ellipsis (...) for overflowed text */
            scrollbar-width: none;
            border: #000 1px solid;
        }

        .scrollable_section::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .field {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 150px;
            height: 16px;
            background-color: red;
            overflow: hidden;
            white-space: nowrap;
            transition: all 1s;
        }

        .verse-one {
            color: white;
            opacity: 1;
            transform: translateX(10px);
            transition: opacity 0.5s, transform 0.5s 0.5s;
        }

        .verse-two {
            color: #000;
            opacity: 0;
            transform: translateX(200px);
            transition: opacity 0.5s, transform 0.5s 0.5s;
        }

        .next-verse {
            background-color: rgb(255, 255, 255);
        }

        .next-verse .verse-one {
            opacity: 0;
            transform: translateX(-200px);
        }

        .next-verse .verse-two {
            opacity: 1;
            transform: translateX(-65px);
        }

JavaScript

function toggleTransition() {
            var box = document.getElementById('example');
            box.classList.toggle('next-verse');
        }