javascript - How to make responsive bubble with triangle on left site -

i try make bubble responsive no matter on user device , have triangle on left site.

how should looks like:

what tried:

html:

.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: 0px;    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;  }

<div class="responsive-bubble">“and here comes long text doesnt mean have long provide lot of characters , see how buble works when long text here , when no text here , on. hope know mean    adding few additional words! adding few additional words! adding few additional words!”</div>  <div class="responsive-bubble">“some shorter text come here see how looks when it's not many text here! shorter text come here see how looks when it's not many text here!”</div>  <div class="responsive-bubble">“some shorter text come here see how looks when it's not many text here!”</div>

what doesn't work:
looks bubble self responsive correctly, have problem triangle on left site, it's no on right position depend on bubble.

demo:
demo changed border , on provide more details: https://jsfiddle.net/jkdurdjr/2/

is here can tell me i'm doing wrong?

the question linked in comments bit complex case , needs adapted lot fit case. there simpler solution case , i'm adding separately.

there no need use calc functions positioning arrow here. needed arrow positioned respect top , left based on dimensions , of parent. set top -4px -4px needed move element no. of pixels equal border-top of parent. when children added, gets positioned below border of parent , need offset it. offset needs done left border of parent + entire arrow needs visible , offset left -22px nothing (size of arrow (it's border width) + left border of parent) * -1.

.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;    border-radius: 5px;    border-color: #ebebeb;    border-style: solid;    float: right;    margin-bottom: 10px;  }  .responsive-bubble:before {    content: "";    position: absolute;    top: -4px;  /* set w.r.t top, value negative of border-top */    left: -22px;  /* needs inverse of border-width of element + border-left of parent */    border-style: solid;    border-width: 18px 18px 0;    border-color: #ebebeb transparent;    display: block;    width: 0;    z-index: 0;  }

<div class="responsive-bubble">“and here comes long text doesnt mean have long provide lot of characters , see how buble works when long text here , when no text here , on. hope know mean    adding few additional words! adding few additional words! adding few additional words!”</div>  <div class="responsive-bubble">“some shorter text come here see how looks when it's not many text here! shorter text come here see how looks when it's not many text here!”</div>  <div class="responsive-bubble">“some shorter text come here see how looks when it's not many text here!”</div>