Chat History CSS

by Naresh

HTML

<div class="chat-history">
  <div class="incoming-msg">
    <div class="received-msg">
      <div class="received-msg-width">
        <p>Incoming message</p>
        <span class="msg-timestamp">12:09 PM</span>
      </div>
    </div>
  </div>
  <div class="outgoing-msg">
    <div class="sent-msg">
      <p>Outgoing message</p>
      <span class="msg-timestamp">12:10 PM</span>
    </div>
  </div>
</div>

CSS

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

.chat-history {
  overflow-y: auto;
  padding: 1rem;
}

.incoming-msg {
  margin: .5rem 0;
}

.received-msg {
  display: inline-block;
  padding: 0 0 0 .75rem;
  vertical-align: top;
  width: 92%;
}

.received-msg-width {
  width: 57%;
}

.received-msg-width p {
  background: #f1f0f0 none repeat scroll 0 0;
  border-radius: 1rem;
  color: #000;
  margin: 0;
  padding: 5px 10px 5px 12px;
  width: 100%;
}

.outgoing-msg {
  overflow: hidden;
  margin: 1rem 0 1rem;
}

.sent-msg {
  float: right;
  width: 46%;
}

.sent-msg p {
  background: #0084ff none repeat scroll 0 0;
  border-radius: 1rem;
  margin: 0;
  color: #fff;
  padding: 5px 10px 5px 12px;
  width: 100%;
}

.msg-timestamp {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 3px 0 0;
}