JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
     <h1>Logo</h1>

	<input type="checkbox" id="d1">
    <form class="searchbox">
        <input type="search" placeholder="" name="search" class="searchbox-input" onkeyup="buttonUp();" required />
        <label for="d1" class="searchbox-icon">GO</label>

    </form>
    <ul>
        <li>Меню</li>
    </ul>
</div>

CSS

.container {
    width:500px;
    height:50px;
    background:gray;
}
.searchbox {
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
.searchbox-input {
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:gray;
}
.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}
.searchbox-icon, .searchbox-submit {
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}

#d1 {
    display: none;
}

#d1:checked + .searchbox {
    width:300px;
}
h1 {
    position: absolute;
    font-family: verdana;
    font-size: 22px;
    left:0px;
    color: #dcddd8;
    background:#172b3c;
    top:-7px;
    height:50px;
    line-height:50px;
}
ul {
    margin:0 auto;
    width:250px;
    height:50px;
    color: #dcddd8;
    background:#172b3c;
    font-family: verdana;
    font-size: 22px;
}
ul li {
    display:inline-block;
    line-height:50px;
}

JavaScript

/*$(document).ready(function () {
      var submitIcon = $('.searchbox-icon');
      var inputBox = $('.searchbox-input');
      var searchBox = $('.searchbox');
      var isOpen = false;
      submitIcon.click(function () {
          if (isOpen == false) {
              searchBox.addClass('searchbox-open');
              inputBox.focus();
              isOpen = true;
          } else {
              searchBox.removeClass('searchbox-open');
              inputBox.focusout();
              isOpen = false;
          }
      });
      submitIcon.mouseup(function () {
          return false;
      });
      searchBox.mouseup(function () {
          return false;
      });
      $(document).mouseup(function () {
          if (isOpen == true) {
              $('.searchbox-icon').css('display', 'block');
              submitIcon.click();
          }
      });
  });*/

  function buttonUp() {
      var inputVal = $('.searchbox-input').val();
      inputVal = $.trim(inputVal).length;
      if (inputVal !== 0) {
          $('.searchbox-icon').css('display', 'none');
      } else {
          $('.searchbox-input').val('');
          $('.searchbox-icon').css('display', 'block');
      }
  }