JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ConversationDIv" runat="server" clientidmode="Static" style="height: 318px;
        width: 100%; overflow: auto;" class='convoDiv'>
            flakjhflsdakjhfdsjaklhfjksdlahfdsakjh
            kfjsdhkjfhdashfaskjfhskfhskjhfdsjhkds
            kfjsdhfkjdhfdahfkdhkfhaskhfkdasfhskdhf
            kfsdkfjhdskfjhdskhfkdshfkhdskfhdskjfhdskjh
            
    </div>
    <table border="0" width="100%">
        <tr>
            <td align="left" style="width: 91%">
            <div class="MsgDiv">
                <textarea ID="Message_txt"  TextMode="MultiLine" class="Messagetxt" onkeyup="ResizeTextArea();"></textarea>
              </div>
            </td>
        </tr>
</table>

CSS

.Messagetxt
       {
        resize:none;
        height:15px;
       position:relative;
        min-height: 20px;
        overflow:hidden;
       width:100%
       }
       .MsgDiv
       {
          border-top: 1px solid #C9D0DA;
          cursor: text;
          max-height: 77px;
          overflow-x: hidden;
          overflow-y: auto;
       }

JavaScript

$(document).ready(function(){
    $("#Message_txt").keyup(function(){
    ResizeTextArea();
    });
function ResizeTextArea() {

            var msgTxtHeight = $("#Message_txt").css("height");
            var containerDivHeight = $(".MsgDiv").css("max-height");
            if ($("#Message_txt").val() == "") {
                $("#ConversationDIv").css("height", "318px");
                $("#Message_txt").css("height","15px");
            }
            if (msgTxtHeight >= containerDivHeight) { return false; }
      $("#Message_txt").css("height", $("#Message_txt").height() + 15);
     $("#ConversationDIv").height($("#ConversationDIv").height() - 15);
           
        }     
});