JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<body>
    <div id="wrap">
        <div id="right">Right with more text</div>
        <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>
</body>

CSS

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

html, body {background-color:gray; height:100%; width:100%}
#wrap
{
    width: 100%;
}
#left, #right {padding:5px;}

#left {
    background-color:red;
    text-align:left;
    display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

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