How can I make the speech bubbles get bigger and smaller according to the text entered on the page

I am creating a comment box on my website and I want to show every comment with a background like speech bubbles, I don't know the size of the text that the user enters every time, all the methods on the Internet are limited to the specified speech volume.

I use Firestore and JavaScript to save and display comments, and here is a part that is displayed on the page and I want to select Show class speech with speech bubbles.

querysnapshot.forEach(function (doc){      listDIv.innerHTML +=  " <div class ='user'> <h3>" +"<i class='fas fa-user'></i> "+       doc.data().name +" : " +"</h3>  <p class='speech'>" + doc.data().message + " </p></div>";    });  

https://stackoverflow.com/questions/67443448/how-can-i-make-the-speech-bubbles-get-bigger-and-smaller-according-to-the-text-e May 08, 2021 at 10:06AM