.chatting {
    max-width: 350pt;
    margin: 20px auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #ededed;
}
.chatting > span {
    margin: 0.6em;
    padding: 0.5em;
    border-radius: 0.3em;
    position: relative;
    line-height: 1.2em;
}
.chatting > img {
    margin: 0.6em;
    max-width: 30%;
}
/*message-left*/
.m-l {
    margin-right: 2em !important;
}
/*message-right*/
.m-r {
    align-self: flex-end;
    margin-left: 2em !important;
}
span.m-l {
    background: #fefefe;  
}
span.m-r {
    background: #97ea70;
}

span.m-l:before,span.m-r:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 0.5em solid transparent;
    position: absolute;
    top: 0.5em;
}
span.m-l:before{
    border-right: 0.5em solid #fefefe;
    left: -1em;
}
span.m-r:after{    
    right: -1em;
    border-left: 0.5em solid #97ea70;
}
.chatting span img {
    max-height: 1.2em; /*the same as the line height*/
    vertical-align: sub;
}