JSFiddle - React, Tailwind, and code Playground

by vincentpace

HTML

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right</div>
    </div>
</body>

CSS

* {border:0; margin:0; padding:0;}

html, body {background-color:gray; height:100%; width:100%}

#left, #right {padding:5px;}

#left {
    background-color:red;
    float:left;
    text-align:left;
    width:calc(100% - 120px); /* deducted amount = width of #right + total horizontal padding*/
    
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
	white-space: nowrap;
    width:100px;
}