How can I resize the text area so that it fits the content width and set the minimum and maximum width?

Question

So, I'm having trouble now with the text area, I can't resize it to the content width... I found a long and detailed answer about content height and it works! But there is no content width above...

This is that article: Creating a text area with automatic resizing

However, my problem is not solved, I need to adjust the width too. Consider maximum and minimum widths.

This is sample code:

$("textarea").each(function () {
  this.setAttribute("style", "height:" (this.scrollHeight) "px;");
}).on("input", function () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) "px";
});
$("textarea").trigger("input");

textarea{
  border: 1px solid black;
  min-width: 50px;
  max-width: 300px;
  width: auto;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/script>
<textarea>this is my normal content, and it has to consider this content to be as long as the max-width</textarea>
<textarea>this is my normal content, should be considered</textarea>
<textarea>this is my min content</textarea>

Also, this is what I want them to be:

Answer 1

Is it similar to this?

Note: As mentioned in the comments, this technique uses the contenteditable attribute

#myInput {
  min-height: 20px;
  max-height: 100px;
  overflow: auto;
  border: 1px solid #000;
  border-radius: 4px;
  max-width: 80%;
  min-width: 40px;
  display: inline-block;
  padding: 7px;
  resize: vertical;
}

<div contenteditable id="myInput"></div>