JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta charset="utf-8" lang="en"/>
    </head>
    <body>
        <script type="module">
   
            let input = document.getElementById("user-input");

            input.onkeyup = function(e){
              onEntered(e,input.value);
            };
        
        </script>
        <div class="grid-container">
            <div id="conversation-text" class="scroll-bar">
            </div>
            <input id="user-input" type="text" placeholder="User Input" /
        </div>
    </body>
</html>

CSS

html,body{
    width: 100%;
    height: 100%;
}


.grid-container{
    display: grid;
    min-height: 100%;
    grid-template-rows: auto auto;
}


.scroll-bar{
    height: 300px;
    min-width: 100%;
    overflow: auto;
}

JavaScript

function onEntered(e,value){
  if(e.key=="Enter"){
      let container = document.getElementById("conversation-text");
       
      let textElement = document.createElement("p");
      textElement.innerText = value;

      container.appendChild(textElement);
   }

}