Chat like UI CSS.

<style type="text/css">

*{
font-size: 22px;
font-family: verdana;
}
.outer {
 display: block;
 clear: right;
}
.lbubble,
.rbubble {
 position: relative;
 padding: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 2px 2px 10px 0px #616161;
 box-shadow: 2px 2px 7px 0px #616161;
 display: inline-block;
 margin-bottom: 8px;
}
.lbubble {
 background: lightblue;
}
.rbubble {
 background: lightgreen;
 float: right;
}
.lbubble:after {
 content: "";
 position: absolute;
 top: 5px;
 left: -8px;
 border-style: solid;
 border-width: 10px 14px 10px 0;
 border-color: transparent lightblue;
 width: 0;
 z-index: 1;
}
.rbubble:after {
 content: "";
 position: absolute;
 top: 5px;
 right: -8px;
 border-style: solid;
 border-width: 10px 0 10px 14px;
 border-color: transparent lightgreen;
 width: 0;
 z-index: 1;
}

</style>


<div class='outer'>
<div class="rbubble">HIiiiiiiii, I am Right Bubble with align right</div>
</div>
<div class='outer'>
<div class="lbubble">Hiiiiiiiii, I am Left Bubble with align left</div>
</div>


Output :)