Chat para post de rol.

/* TU MENSAJE */
<div class="BettyLeg-mensaje"><div class="BettyLeg-text"><div>Gracias por la salida, la pasé muy bonito.</div></div></div>

/*LA RESPUESTA*/
<div class="BettyLeg-mensaje"><div class="BettyLeg-textRespuesta"><div>Ya te extraño</div></div></div>

/* LA RESPUESTA CON STICKER*/
<div class="BettyLeg-mensaje"><div class="BettyLeg-textRespuesta"><img src="https://media4.giphy.com/media/fYN2fD3vkE3aQw28Ft/giphy.gif"/></div></div>

/* TU MENSAJE CON STICKER*/
<div class="BettyLeg-mensaje"><div class="BettyLeg-text"><img src="https://www.descargarstickers.com/img/2020/5/12/711349.png"/></div></div>

/* UBICACION 1*/
<div class="BettyLeg-location"><div class="BettyLeg-titLoc">Parque central</div><img src="https://placehold.jp/80x80.png"/><div class="BettyLeg-subtitLoc">ver en el mapa</div></div>

/* UBICACION 2 (ACTUALIZACION 26/09) */
<div class="BettyLeg-sendLocation"><div class="BettyLeg-SLimg"><img src="https://placehold.jp/100x100.png"/></div><div class="BettyLeg-SLtext"><b>New York</b><br/><span>USA</span></div>

/******** CSS PARA PONER DEBAJO DE LA TABLILLA, AL ÚLTIMO DE TODO. (RESPUESTAS CON STICKERS + NORMALES + UBICACION 1) **/
<style>.post-rol{width:500px; bo rder:1px solid #ddd; margin:10px auto 10px; background:#fff} .BettyLeg-mensaje{width:240px; max-height:150px; margin:5px auto; overflow:hidden;} .BettyLeg-text,.BettyLeg-textRespuesta{margin:5px 0px 5px 40px; border:1px solid #ddd; border-radius:20px 20px 0px 20px; padding:20px 15px; background:#4B738E} .BettyLeg-textRespuesta div, .BettyLeg-text div{max-height:90px; overflow:auto; font-size:12px; font-family:arial; text-align:justify; padding-right:4px; color:#fff;} .BettyLeg-textRespuesta{margin:5px 40px 5px 0px; border-radius:20px 20px 20px 0px; background:#b1bfc7;} .BettyLeg-text img, .BettyLeg-textRespuesta img{width:100px; height:100px; margin-left:30px;}.BettyLeg-location{width:240px; margin:10px auto; border:1px solid #ddd; height:180px; background:#fafafa; overflow:hidden;} .BettyLeg-titLoc{height:50px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #ddd; font-size:10px; text-transform:uppercase; font-family:arial; font-weight:900;color:#4B738E; text-align:center; line-height:13px; background:#fff;} .BettyLeg-location img{width:80px; height:80px; padding:4px; border:1px solid #ddd; margin:4px auto; display:block; border-radius:180px; background:#fff;} .BettyLeg-subtitLoc{height:29px; background:#fff; border-top:1px solid #ddd; margin-top:5px; display:flex; align-items:center; justify-content:center; font-size:8px; font-family:sans-serif; text-transform:uppercase; letter-spacing:1px; cursor:pointer; color:#888;}</style>

/******* CASS PARA PONER DEBAJO DE LA TABLILLA (SOLAMENTE PARA LA UBICACION 2 + MENSAJES CON Y SIN STICKERS) **/

<style>.post-rol{width:500px; bo rder:1px solid #ddd; margin:10px auto 10px; background:#fff} .BettyLeg-mensaje{width:240px; max-height:150px; margin:5px auto; overflow:hidden;} .BettyLeg-text,.BettyLeg-textRespuesta{margin:5px 0px 5px 40px; border:1px solid #ddd; border-radius:20px 20px 0px 20px; padding:20px 15px; background:#4B738E} .BettyLeg-textRespuesta div, .BettyLeg-text div{max-height:90px; overflow:auto; font-size:12px; font-family:arial; text-align:justify; padding-right:4px; color:#fff;} .BettyLeg-textRespuesta{margin:5px 40px 5px 0px; border-radius:20px 20px 20px 0px; background:#b1bfc7;} .BettyLeg-text img, .BettyLeg-textRespuesta img{width:100px; height:100px; margin-left:30px;}.BettyLeg-sendLocation{width:200px; margin:10px auto;height:180px; overflow:hidden; text-align:center;}.BettyLeg-sendLocation img{width:100px; height:100px; border-radius:180px; border:1px solid #ddd; padding:5px; background:#fff; display:block; margin:10px auto 0px; }.BettyLeg-SLtext b{font-size:16px; color:#C98276}.BettyLeg-SLtext{line-height:15px; padding-top:8px;font-family: 'Noticia Text', serif;}.BettyLeg-SLtext span{color:#888; text-transform:uppercase; font-size:10px; letter-spacing:1px;}</style>