JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
    <div class="frame_content">
        <div class="outer one">
            <div class="inner">
                <div class="content">
                    aaaLooooooooooooooooooooooooooooooooooooooooongteeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
        <div class="outer two">
            <div class="inner">
                <div class="content">
                    aaaLooooooooooooooooooooooooooooooooooooooooongteeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
        <div class="outer three">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.frame{
    width:100%;
    height: 400px;
}

.frame_content{
    width:100%;
    height: 100%;
}

.outer{
    width:100%;
    height: 100%;
    display:table;
    table-layout:fixed;
}

.inner{
    display:table-cell;
    vertical-align: middle;
    table-layout:fixed;
}

.content{
    background:red;
    width:100%;
    height: 20px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.one{
    background:yellow;
}
.two{
    background:aqua;
}
.three{
    background:gray;
}