JSFiddle - React, Tailwind, and code Playground

HTML

Text:
<div contentEditable="true" class="questao">edit me</div>
<br />
<button class="addTag">Add Tag</button> <button class="test">Test</button> 
<br />
<textarea id="temp"></textarea>

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;
    *display: inline;
    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 () {
    $(".test").click(function () {
        doCheck();
    });
    $(".addTag").click(function () {
        doCheck();
        $('.questao').html($.trim($('.questao').html()) + '<span contentEditable="false" class="tagResp">&nbsp;</span>');
        $('.questao').focus();
    });
});

function doCheck(){
    $('#temp').val($.trim($('.questao').html()));
}