JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clickDiv">Click to add text inputs</div><br/>
<div id="par" class="par">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

CSS

.par {
    width:300px;
    height:200px;
    background-color:#FFCCCC;
    overflow:hidden;
    position: static;
}
.inp-absolute {
    position: absolute;
    font-size: 11px;
}
.inp {
    font-size: 11px;
}

JavaScript

$("#clickDiv").click(function () {

    var container = $(document.createElement("input"));
    container.addClass('inp-absolute');
    container.attr('type', 'text');
    container.offset({ left: 30, top: 50 });
    container.width(350);
    container.height(20);
	container.val("some text input as we have in Pivot");
    $("#par").append(container);
    
    var container2 = $(document.createElement("input"));
    container2.addClass('inp');
    container2.attr('type', 'text');
    container2.width(350);
    container2.height(20);
	container2.val("some text input with position: static;");
    $("#par").append(container2);
});