JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainClass">
    sometextsometextsometextsometextsometextsometextsometextsometextsometextsometext
</div>
<div class="secondClass">
    9999999999999999999999999999999999999999999999
</div>

CSS

.mainClass {
    
    width: 200px;
    height: 50px;
    background-color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: -100px;
    float: left;
    font-size: 25px;
    
}

.secondClass {
    
    width: 100px;
    height: 50px;
    background: white;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    font-size: 25px;
    
}