JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype>
<html>
    
    <head>
        <style type="text/css">
        #panelLeft {
          display: inline-block;
          width: 50px;
          height: 20px;
          background-color: #f00;
        }
        #panelRight {
          display: inline-block;
          background-color: #0f0;
    
  position: absolute;
  left: 50px;
  right: 0;
            
}
            
        #test {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        </style>
    </head>
    
    
    <body>
        <div id="panelLeft">
        </div>
        <div id="panelRight">
            <div id="test">
                This is some text that's longer than usual and that I'd like to have ellipsized, and forced to a single line, always.
            </div>
        </div>
    </body>
    
</html>