JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="first">
        News
    </li>

    <li>
        <p>
            100m Running Track at The Olympic Museum Lets Visitors Compete 'Real time' with World Record Holder
        </p>
    </li>
    <li>
        <p>
            2012 Paint Color Trends: Paint Hues Drawn from the American Landscape
        </p>
    </li>
</ul>

SCSS

@mixin text-overflow() {
      -o-text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
}

    @mixin border($radius,$bcolor) {
      border: $radius solid $bcolor;
}

li {
    height:35px !important;
    font-size: 18px;
    color: #black;
    font-family: Arial;
    list-style: none;
    border-bottom: 1px solid #F8F7F5;
    cursor: pointer;
    height: 35px !important;
    overflow: hidden;
    @include text-overflow();
    position:relative;
    @include border(1px, blue);
}

li p {
    width: 250%;
    text-align: left;
    position: absolute;
    left:5px;
        @include text-overflow();
    line-height:1px;
}

JavaScript

$("li p").bind({
            click: function () {
                console.log("click")
            },
            mouseenter: function () {
                var $this = $(this);
                
                $this.animate({
                    left: ($this.width() + 20 - $("li").width()) * -1 + "px" 
                }, (15 * 1000), "linear", function () {
                    $this.css({ "left": "5px" })
                    
                })

            }
        });