JSFiddle - React, Tailwind, and code Playground

HTML

<div class="responsive-bubble"> “And here comes some really long text which doesnt mean anything however it have to be long to provide a lot of characters and see how this buble works when long text is here and even when nearly no text is here and so on. I hope you know what I mean So i am adding few additional words! So i am adding few additional words! So i am adding few additional words!”</div>
<div class="responsive-bubble">  “Some shorter text come here to see how it looks when it's not so many text HERE! Some shorter text come here to see how it looks when it's not so many text HERE!”</div>
<div class="responsive-bubble">  “Some shorter text come here to see how it looks when it's not so many text HERE!”</div>

CSS

.responsive-bubble
{
    position: relative;
    display:inline-block;
    max-width:80%;
    min-width:80%;
    min-height:1.5em;
    padding: 20px;
    background: #ebebeb;
    border: #ebebeb solid 4px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 5px;
    border-color: red;
    border-style: solid;
    float:right;
}

.responsive-bubble:before
{
    content: "";
    position: absolute;
    bottom: calc(89% - 3px);
    left: calc(-4% - 3px);
    border-style: solid;
    border-width: 18px 18px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 0;
}