JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <h1>hi</h1>
    <footer id="footer">
        <div id="left"><span>left sideeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span></div>
        <div id="right"><span>play/pause/next</span></div>
    </footer>
</body>
</html>

CSS

#footer { 
    position:absolute;
    bottom:0;
    background-color:#999;
    width:100%;
    min-width: 500px;
}

#left { 
    clear:both;
    float:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:80%;
    overflow:hidden;
    background: hotpink;
}

#right { 
    
    overflow:hidden;
    min-width:100px;
    background: lime;
}