JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red">
    <div class="blue"><h2>hello there</h2></div>
    <div class="blue"><h2>testing: testing: testing: testing: testing: testing: testing: testing</h2></div>
    <div class="blue"><h2>im quite a long title: blablablabla</h2></div>
    <div class="blue"><h2>smiley face :)</h2></div>
    <div class="blue"><h2>i rather use CSS only but feel free to use JS if it the only way posible</h2></div>
</div>

CSS

.red {
    width:400px; 
    background:red;
    padding: 10px 0;
}
.blue {
    width:80%; 
    margin:auto;
    background:blue;
    text-align:center;
} 
h2 {
    text-align:center;
  overflow: hidden;           
white-space:nowrap;
  text-overflow:    ellipsis;
}