JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item-input-inset">
     <h4>Suburb</h4>

    <label class="item-input-wrapper">
        <input type="text" placeholder="Text Area" />
    </label>
</div>
<div class="item-input-inset">
     <h4>Clinic</h4>

    <label class="item-input-wrapper">
        <input type="text" placeholder="Text Area" />
    </label>
</div>

CSS

html, body, .con {
    height:100%;
    width:calc(100% - 4px);
    margin:0;
    padding:0;
}
.item-input-inset {
    display:inline-block;
    width:100%;
    font-weight:bold;
}
.item-input-inset > h4 {
    float:left;
    margin-top:0;
    width:15%;
}
.item-input-wrapper {
    display:block;
    float:right;
    width:85%;
}
input {
    width:100%;
}