JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<ul class="form_group">
<li>
<label for="client_name">Company Name</label>
</li>
<li>
<input class="form-control" name="client_name" type="text" id="client_name" />
</li>
<li>
<label for="client_name_helper" class="form_helper">Input your clients name</label>
</li>
</ul>
</div>
<div class="form-group">
<ul class="form_group">
<li>
<label for="client_name">Company Code</label>
</li>
<li>
<input class="form-control" name="client_name" type="text" id="client_name" />
</li>
<li>
<label for="client_name_helper" class="form_helper">Input your clients code</label>
</li>
</ul>
</div>
CSS
ul {
list-style:none;
}
li:nth-child(2), li:nth-child(3) {
display:inline;
}
.form_helper {
display:none;
}
.form_helper_show {
display:inline-block;
}
JavaScript
$(document).ready(function () {
$('.form-control').bind('blur', function () {
$(this).parent().next('li').find('.form_helper').hide();
}).bind('focus', function () {
$(this).parent().next('li').find('.form_helper').show();
});
});