JSFiddle - React, Tailwind, and code Playground

HTML

<div class='row'>
    <input type='text' />
    <div class="magicbox"><a href="http://google.com">Click Me if you can</a></div>
</div>

CSS

.linksdiv {
    background: yellow;
}

.link {
    color: blue;
}
.linksdiv .magicbox{
    display:block !important;
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    left:200px;
    top:0px;
}  
.row{
  position:relative;
}

JavaScript

$(".magicbox").css("display","none");

    $('input').focus(function(){
            $(this).parents('.row').addClass("linksdiv");
                }).blur(function() {
                    $(this).parents('.row').removeClass("linksdiv");
        });