JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">This is a short story, it doesn't need to be ellipsed.</div>
    <div class="end">
        end
        <div class="ellipsis">...</div>
    </div>
</div>

<br>
<br>
<br>
<br>

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">This is a long story. You won't be able to read the end of this story because it will be to long for the box I'm in. The story is not too interesting though so it's good you don't waste your time on this.</div>
    <div class="end">
        end
        <div class="ellipsis">...</div>
    </div>
</div>

CSS

.wrap {
    height: 100px;
    width: 234px;
    border: solid 1px #000;
    overflow: hidden;
}

.left-side {
    float: left;
    width: 32px;
    height: 100px;
    background: #F00;
}

.text {
    float: right;
    border: solid 1px #0F0;
    width: 200px;
}

.end {
    position: relative;
    float: right;
    width: 30px;
    border: solid 1px #00F;
}

.ellipsis {
 	position: absolute;
	top: -25px;
	left: 198px;
    background: white;
    font-weight: bold;
    color: #F0F;
}