<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div style="height:300px">
<div class="col-sm-12">
<div id="chatbox_female" class="chatbox" style="bottom: 0px; right: 20px; display: block;">
<div class="chatboxhead">
<div class="chatboxtitle">
<span class="glyphicon glyphicon-heart-empty pulse"></span>· female
</div>
<div class="chatboxoptions">
<div class="dropdown">
<a href="javascript:void(0)" id="settings" data-toggle="dropdown" area-haspopup="true" area-expanded="true"><i class="fa fa-gears"></i></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="settings">
<li><a href="#"><i class="fa fa-flag"></i> Report</a></li>
<li><a href="#"><i class="fa fa-ban"></i> Block</a></li>
</ul>
</div>
<a onclick="javascript:toggleChatBoxGrowth('female')" href="javascript:void(0)"><i class="fa fa-minus"></i></a>
<a onclick="javascript:closeChatBox('female')" href="javascript:void(0)"><i class="fa fa-close"></i></a>
</div>
<br clear="all">
</div>
<div class="chatboxcontent">
<div class="chatboxmessage ltr">
<span class="chatboxmessagefrom">female</span>
<div class="chatboxmessagecontent">
<time datetime="2009-11-13T20:00">today • 51 min</time>
yes we can
</div>
</div>
<div class="chatboxmessage">
<span class="chatboxmessagefrom">male44</span>
