JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status_change">
    <p id="status">Статус</p>
    <div id="status_cotainer_change">
        <div>
            <input type="text" id="status_val">
        </div>
        <div style="margin-top:7px;">
            <button id="save_status">Сохранить</button>
        </div
        <div>
    </div>
</div>

CSS

#status{
    text-decoration: underline;
    cursor: pointer;
}
#status_change{
    position: relative;
}
#status_cotainer_change{
    position: absolute;
    width:316px;
    top: 0px;
    background-color: #eee;
    border: 1px solid #aaa;
    padding: 7px;
    display:none;
}
#status_val{
    margin: none;
    width:312px;
}
#save_status{
    padding: 5px 10px 6px;
    font-size: 11px;
    float:right;
}

JavaScript

$(document).ready(function(){
    // open
    $('#status').click(function(){
        $('#status_val').val($('#status').text());
        $('#status_cotainer_change').show();
    });
    
    // save
    $('#save_status').click(function(){
        $('#status').text($.trim($('#status_val').val()))
        $('#status_cotainer_change').hide();
    });
})