JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<ul class="list-items">
  <li class="list" focus-next>
    
              <div contenteditable class="fake-input">For example some text here</div>
            </li>
</ul>

CSS

.fake-input {
    white-space: nowrap;
  overflow: hidden;
  width: 97%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
  }
li {
  list-style: none;
}
.fake-input br {
  display: none;
  }
  .fake-input {
    border: 1px solid lightgrey;
  }

JavaScript

$(document).ready(function() {
    
      $(document).keyup(function(e) {
        if (e.which === 13) {
          e.preventDefault();
          var appendedElm ='<li class="test"><div contenteditable="" class="fake-input"></div></li>';
          $(e.currentTarget).find("ul.list-items").append(appendedElm);
        }

    
      });
    })