JSFiddle - React, Tailwind, and code Playground

HTML

<article id="article" contenteditable="true">
<p class="paragraph">some..</p>
</article>

CSS

article {min-height: 30px; background: #eee;}
p {background: red; color: white; min-height: 20px;}

JavaScript

$('#article').keyup(function () {
    if (this.querySelector('p')) return;

    $(this).append('<p class="paragraph"></p>').find('p').focus();
});