JSFiddle - React, Tailwind, and code Playground

HTML

<label>menu<input type="text"/>
  <ul>
      <li>google</li>
  </ul>
</label>
elsewhere

CSS

label{
    height:14px;
    overflow:hidden;
    display:block;
    border:1px solid black;
    }
input{
    border-width:0px;
    width:0px;
    height:0px;
}

JavaScript

jQuery('input').focus(function(){
    jQuery('label').css('height','120px');});

jQuery('input').focusout(function(){jQuery('label').css('height','20px');});