JSFiddle - React, Tailwind, and code Playground
HTML
<div class="input">
<label>Name</label>
<input type="text">
<input type="text">
<div>
<div class="addition">Input addition</div>
</div>
</div>
<div class="input">
<label>Rest</label>
<input type="text">
</div>
CSS
.addition {
display: inline-block;
}
.input > div {
display: none;
}
JavaScript
$(function() {
$('input').on('focus blur', function(e){
$(this).siblings('div')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
})
})