How to set div block with contenteditable property?

Question

JavaScript

Hello!
<div id="test" contenteditable></div>

#test{
    width: 200px;
    height: 25px;
    border: 1px solid;
    padding-left: 9px;
    display: block;
    border-radius: 4px;
};

let t = document.querySelector('#test');

t.addEventListener('keypress', function(e){
      e.target.innerHTML = e.target.textContent.replace(
               /hello/gim,
            (p)=>{
                return '<span style="color: red">'+p+'</span>'
            }
      );
});

1) What is the reason for the strange (for me) behavior when entering this div( input ), because when entering text, the cursor returns to the beginning of the line each time and the inner text is turned upside down, just when using the replace( )?
2) Is it possible to use cssor JSdisable line breaks when the enter key is pressed? As far as I understood in the inspector, these are not even line breaks, but this div, when you press the enter key, creates another one inside itself, with
and expanding its boundaries accordingly, it all looks terrible, if it’s written as I have itborderit turns out that this frame has nothing to do with what appears when you press the enter key (well, I think if you try to type something there, you will understand everything yourself), in fact, I need to simulate text input in a regular one inputor textareaBUT it cannot be implemented in them regular expressions with dynamic text color replacement, so I actually look in the direction of this diva with this attribute