JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div class="fixed_width">
    <div class="obscure">
      <p class="v">Add a line item</p>
    </div>
  </div>  
</div>


<button>Add dynamic div</button>

CSS

body{
    margin:10px; 
    background-color:yellow;
}

.fixed_width, .content, .obscure{display: block;}

#wrapper {
   position: relative;
}

.dynamic {
    position: absolute;
    top:0;
}

.fixed_width {
    width:700px; 
    height:100px; 
    padding:0px;

}
.obscure, .content{width:100%;height:100%}

.obscure{
    outline: 5px dashed #5e5eff; 
    font-family:Sans-serif;
    font-size: 18pt;
    text-align:center;
    background-color:transparent;
    background: rgb(255, 255, 255); 
    background: rgba(255, 255, 255, .7);}
.obscure:hover{
    background: rgba(255, 255, 255, .5);
    cursor:pointer;
}
.v{ 
    position: relative; 
    top:36%; 
    height:18px; 
    margin-top:0px; 
    color:#4747e3; 
    font-weight:bold;}
input[type=text]{color:red;}

JavaScript

$("button").click(function(){
   $('<div class="fixed_width dynamic"> <div class="content">  <input type="text" class="fl" />  <input type="text" class="fl" />        <br>    <textarea>enter information</textarea>    </div>  </div>').appendTo($("#wrapper")); 
    
    });