<div class="contact">

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

  <div class="contact-body">

    <div class="contact-title">

      <div class="contact-name">Konstantin Konstantinopolsky (Designer)</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. And I forgot to tell you that inside the project insert the text of «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.» </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;

}