JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dialog">
  <div class="d-content">
    <span class="mess_username">name</span>
    <span class="mess_date">01 01 0101</span>
    <span class="mess_text">Lorem ipsum gfdd.</span>
  </div>
  <div class="d-content">
    <span class="mess_username">name</span>
    <span class="mess_date">01 01 0101</span>
    <span class="mess_text">Lorem ipsum.</span>
  </div>
  <div class="d-content">
    <span class="mess_username">name</span>
    <span class="mess_date">01 01 0101</span>
    <span class="mess_text">Lorem ipsum.</span>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}
.dialog {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  padding: 10px 30px;

}

.d-content {
  //display: inline-block;
  width: max-content;
  padding: 10px;
  background: #dcf8c6;
  border-radius: 0.4em;
  margin-top: 5px;
}

.mess_username {
  color: #1d5987;
  font-weight: 700;
  font-size: 12px;
}
.mess_date {
  color: #6c757d;
  font-weight: 400;
  font-size: 12px;
}
.mess_text {
  display: flex;
}
.new-message {
  padding: 5px 0;
}