How to move blinking element after javascript result?

I’m trying to move my blinking element directly to end of the result in the same line.
But my blinking cursor still shows under my javascript result and I can’t put it on the end of the result.

I tried: flex, float left, display: inbolcks and even margin div into div, but id didn’t help.
How can I do it?
I will be really glad for help!

function myFunction() 
{
    result.innerHTML += "I will not make any more boring art ";
    
}
body
{
    background-color:white;
    font-family: Lucida Console Regular;
    font-size:15px;
    color:black;
    border-width:0px;
    border: 0;
}
input {
  font-size:15px;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: hidden;
  background-color: white;
  font-family: Lucida Console Regular;
  color: transparent;
      display: inline-block;

}

result{
        display: flex;
    
}

.no-outline:focus {
  outline: none;
}

textarea:focus, input:focus{
               outline: none;
                
            }

.cursor {
    position: relative;
    float:left;
    flex:1;

}
.cursor i {
    flex:1;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: black;
    animation-name: blink;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
    opacity: 1;

    
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0; }
}
<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >

<div id="result"></div>

<div class="cursor">
<input type="text" class="rq-form-element" /><i></i></div>