title: how to dispaly name, current time in message chat box
body: <p>We developed chat application looks like watts-app. we finished everything but i want to show name and current time in chat message box. how to do that </p>
  
  <p><a href="https://i.stack.imgur.com/oz40S.png" rel="nofollow noreferrer">requirement screen shot</a></p>
  
  <p><a href="https://i.stack.imgur.com/ACP2E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ACP2E.png" alt="enter image description here"></a></p>
  
  <pre class="lang-css prettyprint-override"><code>.left {
    position: relative;
    background: white;
    text-align: right;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
    float: right;
    right: 20px;
  }
  
  .left::before {
    content: '';
    position: absolute;
    visibility: visible;
    top: -1px;
    right: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #ccc;
  }
  
  .left::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    right: -8px;
    border: 10px solid transparent;
    border-top: 10px solid white;
    clear: both;
  
  }
  
  div{
    clear: right;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="left"&gt;
    &lt;p style="margin-top: 0px;margin-bottom: 0px;color:green;font-size: 11px;"&gt;Kranti&lt;/p&gt;
    &lt;span&gt;thanks&lt;/span&gt;
     &lt;p style="float: left;margin-bottom: 0px;color:red;font-size: 11px;"&gt;2:33 PM&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>