JSFiddle - React, Tailwind, and code Playground

HTML

<div class="has-help-inline">

    <div><input type="text" placeholder="First Input" /></div>
    <div class="help-inline">Foobar</div>

</div>

<div class="has-help-inline">

    <div><input type="text" placeholder="Second Input" /></div>
    <div class="help-inline">Foobar</div>

</div>

CSS

body { padding: 20px; font-family: sans-serif;}

div { float: left; display: inline;}

input { background: #fff; font-size: 14px; padding: 6px; border-radius: 7px; border: 1px solid #ccc;}
.help-inline { display: inline-block; background:#ccc; padding: 6px; display: none; border-radius: 7px; margin-left: 10px; color: #353535; }
.has-help-inline { float: left; width: 100%;
    padding: 10px 0; border-bottom: 1px solid #ccc;}

JavaScript

function formHelpers() {


    
    
    if( $('.has-help-inline').children('.help-inline') ) {
 

        
        $("input").focusin(function() {
           $(".help-inline").fadeIn(400);
        }).focusout(function () {
            $(".help-inline").fadeOut(100);
        });
   

                
        
    }

}

formHelpers();