JSFiddle - React, Tailwind, and code Playground

by sparebytes

HTML

<div>
    <div class="l">
        a b c d e f g h i j k l m
    </div>
    <div class="r">
        n o p q r s t u v w x y z
    </div>
</div>
<div>
    <div class="l">
        a b c 
    </div>
    <div class="r">
        e f g
    </div>
</div>

CSS

.l, .r {
    display: inline-block;
    max-width: 5em;
    white-space: nowrap;
    overflow: hidden;
}
.l {
    text-overflow: ellipsis;
}
.r {
    direction: rtl;
}