Display chat message with Box Shadow like Facebook using CSS

Hi zzz,

Refer the below code.

<div class="chat">
    <div class="bubble you">
        Hi ttt.
    </div>
    <div class="bubble me">
        Hello there!</div>
    <div class="bubble you">
        Hi. I'm an expandeable chat box with box shadow. How are you? I expand horizontally
        and vertically, as you can see here. Hi. I'm an expandeable chat box with box shadow.
        How are you? I expand horizontally and vertically, as you can see here.</div>
    <div class="bubble me">
        Awesome</div>
    <div class="bubble me">
        a
    </div>
    <div class="bubble you">
        Hi.
    </div>
    <div class="bubble me">
        Hi. I'm an expandeable chat box with box shadow. How are you? I expand horizontally
        and vertically, as you can see here.</div>
</div>
<div>
    <style type="text/css">
        .chat
        {
            width: 400px;
        }
            
        .bubble
        {
            background-color: #F2F2F2;
            border-radius: 5px;
            box-shadow: 0 0 6px #B2B2B2;
            display: inline-block;
            padding: 10px 18px;
            position: relative;
            vertical-align: top;
        }
            
        .bubble::before
        {
            background-color: #F2F2F2;
            content: "\00a0";
            display: block;
            height: 16px;
            position: absolute;
            top: 11px;
            transform: rotate( 29deg ) skew( -35deg );
            -moz-transform: rotate( 29deg ) skew( -35deg );
            -ms-transform: rotate( 29deg ) skew( -35deg );
            -o-transform: rotate( 29deg ) skew( -35deg );
            -webkit-transform: rotate( 29deg ) skew( -35deg );
            width: 20px;
        }
            
        .me
        {
            float: left;
            margin: 5px 45px 5px 20px;
            width: 70%;
        }
            
        .me::before
        {
            box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
            left: -9px;
        }
            
        .you
        {
            float: right;
            margin: 5px 20px 5px 45px;
        }
            
        .you::before
        {
            box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
            right: -9px;
        }
    </style>
</div>

Screenshot