[html]
<main>
    <style>
        *{
  box-sizing:border-box;
}
body{
  background-color:#abd9e9;
  font-family:Arial;
}
#container{
  background:#eff3f7;
  margin:0 auto;
  font-size:0;
  border-radius:5px;
  overflow:hidden;
}
aside{
  width:260px;
  height:800px;
  background-color:#3b3e49;
  display:inline-block;
  font-size:15px;
  vertical-align:top;
}
main{
  /* width:490px; */
  height:800px;
  font-size:15px;
  vertical-align:top;
}


aside ul{
  padding-left:0;
  margin:0;
  list-style-type:none;
  overflow-y:scroll;
  height:690px;
}
aside li{
  padding:10px 0;
}
aside li:hover{
  background-color:#5e616a;
}
h2,h3{
  margin:0;
}
aside li img{
  border-radius:50%;
  margin-left:20px;
  margin-right:8px;
}
aside li div{
  display:inline-block;
  vertical-align:top;
  margin-top:12px;
}
aside li h2{
  font-size:14px;
  color:#fff;
  font-weight:normal;
  margin-bottom:5px;
}
aside li h3{
  font-size:12px;
  color:#7e818a;
  font-weight:normal;
}


#chat{
  padding-left:0;
  margin:0;
  list-style-type:none;
  overflow-y:scroll;
  height: 500px;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  background: #fff;
}
#chat li{
  padding:10px 30px;
}
#chat h2,#chat h3{
  display:inline-block;
  font-size:13px;
  font-weight:normal;
}
#chat h3{
  color:#bbb;
}
#chat .entete{
  margin-bottom:5px;
}
#chat .message{
  padding:20px;
  color:#fff;
  line-height:25px;
  max-width:90%;
  display:inline-block;
  text-align:left;
  border-radius:5px;
}
#chat .me{
  text-align:right;
}
#chat .you .message{
  background-color:#58b666;
}
#chat .me .message{
  background-color:#6fbced;
}
#chat .triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
}
#chat .you .triangle{
    border-color: transparent transparent #58b666 transparent;
    margin-left:15px;
}
#chat .me .triangle{
    border-color: transparent transparent #6fbced transparent;
    margin-left:375px;
}

    </style>
    <ul id="chat">
      <li class="you">
        <div class="entete">
          <h2>Контакт 1</h2>
          <h3>10:12, Сегодня</h3>
        </div>
        <div class="triangle"></div>
        <div class="message">Добрый день, юнная леди, вы занимаетесь любовью с незнакомцами?</div>
      </li>
      <li class="me">
        <div class="entete">
          <h2>Арчер</h2>
          <h3>10:12, Сегодня</h3>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Конечно нет!
        </div>
      </li>
      <li class="you">
        <div class="entete">
          <span class="status green"></span>
          <h2>Контакт 1</h2>
          <h3>10:13, Сегодня</h3>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Тогда позвольте представиться...
        </div>
      </li>
      
    </ul>
    
  </main>
[/html]