CSS style for chat with messages from more than one line

I made a template that I think can serve you in a more practical way. I separated the top in a div and the bottom where the text comes in another div. The div where you have the text has the automatic height according to the text that comes in.

To make the circle come the image of .avatar I used a pseudo element ::after and box-shadow with two leftovers and the box .txt azul border-radius

See in the example how it was, from one studied in the code to understand better and any doubt is just leave a comment that I explain.

.container {
  position: relative;
  overflow: hidden;
  padding: 0.5em;
}
.avatar {
  width: 150px;
  height: 30px;
  background: rgb(13, 114, 245);
  border-radius: 30px 30px 0% 0%;
  margin-left: 50px;
  position: relative;
}
.avatar::after {
  content: "";
  position: absolute;
  left: -53px;
  top: 0;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 4px solid #fff;
  background-image: url(http://placecage.com/50/50);
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.75), 0 0 0 3px rgba(255,255,255,1.0);
  border-radius: 50%;
}
.txt{
  position: relative;
  color: #fff;
  width: 200px;
  height: auto;
  background: rgb(13, 114, 245);
  border-radius: 0% 0% 30px 30px;
  box-sizing: border-box;
  padding: 0 10px 30px 60px;
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.25);
}

<div class="container">
  <div class="avatar"></div>
  <div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
<div class="container">
  <div class="avatar"></div>
  <div class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam iste ratione impedit facere quibusdam odit, iusto consequuntur error alias praesentium.</div>
</div>

As I do not know exactly how the rest of your code is, I can not give you a 100% functional example, but I can explain the idea and give you a direction to do.

I will assume that in addition to these two divs there is one more that has the user icon sending the message.

What you could do is put these 3 divs inside a single container. Something similar to this:

<div class="container" >
    <div class="icone"  >    </div>

    <div class="response" >   </div>
    <div class="effect2" >    </div>
</div>

And then force the icon to be at the bottom of this container, so that the effect will happen:

.icone {
    position: absolute;
    left: 0px;
    bottom: 10 px; /* vá alterando o valor daqui até ficar numa boa posição para o efeito*/
}

absolute attribute of the position attribute causes the element to be positioned relative to the first parent element other than static , to better understanding see here or here .