JSFiddle - React, Tailwind, and code Playground
HTML
<div class="text_container_border">
<div class="row">
<label class="input_label">#1 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
<div class="row">
<label class="input_label">#2 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
<div class="row">
<label class="input_label">#3 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
<div class="row">
<label class="input_label">#4 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
</div>
CSS
.row {
display: table-row;
}
.input_label {
display: table-cell;
margin: 0px;
padding: 0px;
}
.input_span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
.hidden_textfield {
width: 100%;
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
}
.text_container_border {
display: table;
width: 100%;
border: 1px solid #b2b2b2;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
.notes {
border: 1px solid #b2b2b2;
height:80px;
width: 100%;
overflow: auto;
resize: none;
}