<div class="contact">

  <img class="avatar" src="https://assets.codepen.io/1425525/avatar_2.jpg" alt="Jedi Padawan">

  <div class="contact-body">

    <div class="contact-title">

      <div class="contact-name">Jedi Padawan</div>

      <div class="contact-time">10:12</div>

    </div>

    <p class="contact-message">Hi, is the third project coming soon? It should be submitted soon.</p>

  </div>

</div>

body {

  margin: 0;

  padding: 50px;

  font: 16px/1.5 sans-serif;

  color: #fff;

}

​

.avatar {

  width: 50px;

  border-radius: 50%;

}

​

.contact {

  display: flex;

  align-items: center;

  padding: 0 1rem;

  background-color: #673ab7;

  width: 420px;

}

​

.contact-body {

  padding: 1.5rem;

}

​

.contact-title {

  display: flex;

}

​

.contact-name {

  font-weight: 700;

}

​

.contact-time {

  margin-left: auto;

  font-size: 80%;

}

​

.contact-message {

  margin: 0;

  font-size: 80%;

  color: #d6d6d6;

}