JSFiddle - React, Tailwind, and code Playground

HTML

Text:
<div contentEditable="true" class="questao">edit me</div>
</br>
<button class="addTag">Add Tag</button>

CSS

div.questao {
    width: 500px;
    height: 200px;
    border:2px solid #dadada;
    border-radius:7px;
    box-shadow:0 0 10px #9ecaed;
}

span.tagResp {
    border:2px solid #dadada;
    border-color:#9ecaed;
    border-radius:7px;
    display: inline-block;
    height: 10px;
    width: 50px;
    padding:5px;
    margin-top:3px; 
    box-shadow:0 0 10px #9ecaed;
    white-space:nowrap;
}
button.addTag {
    border:2px solid #dadada;
    border-color:#9ecaed;
    border-radius:7px;
    width: 500px;
}

JavaScript

$(document).ready(function () {
    $(".addTag").click(function () {
        $('.questao').html($('.questao').html() + '&nbsp;<span contentEditable="false" class="tagResp">&nbsp;</span>&nbsp;');
        $('.questao').focus();
    });
});