LiveChatReplay

HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <div class="messageBox">
    <div class="header">
      <p>Live Chat Replay</p>
    </div>
    <div class="content">
      <div class="message">
        <img class="profile-pic" src="https://yt3.ggpht.com/ytc/AAUvwnjDRW6z60q7Db1fOB8-fHRjz4HcW_d-_sa9Ow=s88-c-k-c0x00ffffff-no-rj"/>
        <p class="text">
        <span>Michael Collins</span>
        Hello world, this is a test message. HEYYY. ADDING SOME EXTRA TEXT.
        </p>
      </div>
    </div>
  </div>
<!-- End your code here -->
</body>
</html>

CSS

.messageBox {
  position: absolute;
  width: 300px;
  height:  500px;
  border: 1px solid #d1d1d1;
  overflow-y: auto;
}

.message { 
  display: flex;
  align-items: center;
  justify-items: center;
}

.profile-pic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.messageBox .header {
  position: absolute;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d1d1d1;
}

.messageBox .header p {
  position: absolute;
  margin-left: 15px;
  font-family: 'Roboto', sans-serif;
}

.messageBox .content {
  width: 95%;
  position: absolute;
  top: 50px;
  height: auto;
  border: 1px solid green;
}

.messageBox .content .message {
  margin: 10px;
  border: 1px solid red;
  font-family: 'Roboto', sans-serif;
  font-size: small;
}

.messageBox .content .message .pfp {
  width: 25px;
  border-radius: 500px;
  margin-right: 10px;
}

.messageBox .content .message .text{
  margin-left: 15px;
}

.messageBox .content .message .text span{
  color: #747474;
  margin-right: 5px;
}