JSFiddle - React, Tailwind, and code Playground

HTML

<div id='inline' class="toolbar">
        <div id="div1" class="inline left clip">
            Some really really really really really really really really really really really really really long line of text.
        </div>
        <div id="div3" class="inline right">Right Stuff</div>
        <div id="div2" class="inline middle">Middle Stuff</div>

CSS

.toolbar {
              width: 100%;
              height: 45px;
              background-color: #fff;
              border-bottom: 1px solid #d5d5d5;
            }
            
            .middle {
              text-align: center;
            }
            
            .left {
                text-align:left;
            }
            
            .right {
                text-align:right;
            }
            
            .border {
                border:thin solid silver;
            }
            
            .clip {
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            #float > div {
                width:32%;
                height:100%;
            }
            
            #div3 {

              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 20px;
              overflow: visible;
              margin-top: 5px;
            }
            #div1
{
    display: inline-block;
    width: 40%;
    white-space: nowrap;
    overflow: ellipsis;
}

            #div2 {
                position: relative;
                width: 100px;
                background: yellow;
                top: -20px;
                margin: 0 auto;
            }