JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x">
    <div class="y" title="aaaaa">
        <a href="/">
            aaaaa
        </a>
    </div>
    <div class="y" title="bbbbbb">
        <a href="/">
            bbbbbb
        </a>
    </div>
    <div class="y" title="ccccc">
        <a href="/">
            ccccc
        </a>
    </div>
    <div class="y" title="dddddddd">
        <a href="/">
            dddddddd
        </a>
    </div>
</div>

CSS

.x{
    width: 10em;
    background-color: #FFB9B9;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
}
.y {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    white-space: nowrap;    
    background-color: #E1CECE;
    display: inline-block;
}