JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="song" value="some title of a song thats pretty long and goes on a bit......" />
<input type="button" value="set" onclick="SetSongTitle()" />

<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner">Song Track Name <div></div></div>

CSS

#mplayerinfo_wrapper{
    width:545px;
    height:30px;
    margin-top:32px;
    display:inline-block;
    float:left;
}

#mplayerinfo_trackinfo{
    height:30px;
    width:238px;
    display:inline-block;
    overflow:hidden;
    float:left;
}

#ti_inner{
    float:left;
    height:30px;
    width:auto;
    white-space: nowrap;

}

#mtext
{
    width: 100px;
}

JavaScript

function SetSongTitle()
{
    CheckMarquee( $("song").value );
}


function CheckMarquee( songname )
{
    var el = $( "mplayerinfo_trackinfo" );
    var elInner = $( "ti_inner" );
    elInner .innerHTML = songname;
    if( el.scrollWidth > el.offsetWidth )
    {
        elInner.innerHTML = "<marquee>"+songname+"</marquee>"
    }
}

CheckMarquee();