Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think?
.Message {
display: inline-grid;
grid-template-areas: ". name""date text";
}
.Date {
align-items: center;
display: flex;
grid-area: date;
}
.Name {
grid-area: name;
}
.Text {
grid-area: text;
}
.Date,
.Name,
.Text {
border: 1px solid #f00;
padding: 5px 10px;
}<div class="Message">
<div class="Name">name</div>
<div class="Date">date (vertically centered)</div>
<div class="Text">three<br />line<br />text</div>
</div>