JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="search" class="input-group">
  <input type="text" name="search" placeholder= "Поиск" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div>

CSS

#search {
  position: relative;
  width: 300px;
  margin: 0 10px auto auto;
  height: 40px;
}
button.btn {
  background: #7f7f7f;
  border: 2px groove #7BA7AB;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
}

input.form-control {
  height: 40px;
  width: 300px;
  padding: 0 40px 0 0px;
  background: transparent;
  transition: 0.5s;
  position: absolute;
  top: 0;
  right: 0;
}


input.form-control:focus {
  width: 300px;
  z-index: 1;
}

@media screen and (max-width: 768px){
  input.form-control {
    width: 0px;
    z-index: 2;
  }
}