JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed_width">
    <div class="obscure">
    <p class="v">Add a line item</p>
    </div>
</div>
<div class="fixed_width">
    <div class="content">
        <input type="text" class="fl" />
        <input type="text" class="fl" />
        <br>
        <textarea>enter information</textarea>
    </div>
</div>

CSS

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

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



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

}
.obscure, .content{width:100%;height:100%}
.content{
    background-color:#fff;
    margin-right:5px;  
    position: relative;
    top: -100px;
}
.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;}