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: none;
}
JavaScript
$(function() {
$('input').on('focus blur', function(e){
$(this).closest('div').find('.addition')[e.type === 'focus' ? 'slideDown' : 'slideUp'](100)('stable').css('display', 'inline-block');
})
});