<div id="wrap">

  <!-- section -->
  <div class="section">
    <div class="center">

      <div id="chat">
        <div class="msg"></div>
      </div>
      
      <button id="send"><span>Send</span></button>

    </div>
  </div>
  <!--/section -->

</div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.section {
  padding: 40px;
}

#chat {
  width: 400px;
  height: 400px;
  background: #eee;
  padding: 20px;
  margin: 0 auto 20px;
  overflow-y: auto;
}

.msg {
  padding: 10px;
  box-shadow: 0 2px 2px fade(#000, 5%);
  margin-top: 20px;
  position: relative;
  
  &::before {
    content: 'Message text';
    display: block;
  }
  
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
  }
  
  &:first-child {
    margin-top: 0;
  }
  
  &:nth-child(2n-1) {
    margin-right: 60px;
    border-radius: 4px 4px 4px 0;
    background: #f9ff8b;
    
    &::after {
      left: 0;
      border-top-color: #f9ff8b;
      border-left-color: #f9ff8b;
    }
  }
  
  &:nth-child(2n) {
    margin-left: 60px;
    border-radius: 4px 4px 0 4px;
    background: #e7ffef;
    
    &::after {
      right: 0;
      border-top-color: #e7ffef;
      border-right-color: #e7ffef;
    }
  }
}

#send {
  display: block;
  padding: 10px;
  width: 400px;
  margin: auto;
  cursor: pointer;
}

$(function() {
  var $chat = $('#chat'),
    $msg = $chat.find('.msg').last(),
    $send = $('#send');
  
  $send.click(function() {
    $msg.clone().appendTo($chat);
    $chat.stop().animate({
      scrollTop: $chat.prop('scrollHeight') - $chat.height()
    }, 600);
  });
});