JSFiddle - React, Tailwind, and code Playground

by TheSneak

HTML

<div class="content">
 

      <div class="right">  
        here are the buttons
      </div>
    
      <div class="left">
        <p>Hi, Flo! this is really long text.  it may get truncated.  i hope it does</p>
      </div>       
    </div>

CSS

.content {
    background-color: pink;
    height: 30px;
}

.content .left{
    background-color:green;
}

.content .left p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
}

.content .right{
    float:right;        
    width:130px;
    background-color:red;
}