JSFiddle - React, Tailwind, and code Playground
HTML
<div class="messageContainer">
<span class="time">10:00</span>
<span class="nickname">Tom:</span>
<span class="message">test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message </span>
</div>
CSS
.messageContainer {
display: table;
table-layout:fixed;
}
.time {
display:table-cell;
width:70px;
vertical-align:top;
}
.nickname {
display:table-cell;
width:70px;
vertical-align:top;
}
.message {
display:inline-block;
text-indent:70px;
margin-left:-70px;
}