JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="wrapper">
    <div class="messages">
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;123</div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;4354353</div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;adsdasads</div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque accusamus quos quod natus quasi autem quisquam harum a molestias dolorum temporibus culpa et libero, illo. Consequatur labore, esse perspiciatis.</div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque accusamus quos quod natus quasi autem quisquam harum a molestias dolorum temporibus culpa et libero, illo. Consequatur labore, esse perspiciatis.</div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque accusamus quos quod natus quasi autem quisquam harum a molestias dolorum temporibus culpa et libero, illo. Consequatur labore, esse perspiciatis.</div>
        <div class="message">
            <span class="message__from">Петр Петров</span>&nbsp;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque accusamus quos quod natus quasi autem quisquam harum a molestias dolorum temporibus culpa et libero, illo. Consequatur labore, esse perspiciatis.</div>
        <div class="message"> <span class="message__from">Иван Иванов</span>&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque accusamus quos quod natus quasi autem quisquam harum a molestias dolorum temporibus culpa et...

CSS

body {
    font-family: Arial;
    font-size: 12px;
    background-color: #336699;
}
.wrapper {
    width: 300px;
    margin: 50px;
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: auto;
}
.messages {
    overflow: hidden;
    background-color: #fff;
}
.message {
    margin: 2px 0;
    padding: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.message:nth-child(2n+1) {
    background-color: #eee;
}
.message__from {
    white-space: nowrap;
    font-weight: bold;
}