<div class="wrapper">
  <input placeholder="Search..." class="myinput"/>
  <div class="search" onclick="openInput()">
    <i class="fa fa-search"></i>
  </div>
</div>

body {
  background-color: #B0F59C;
}

.wrapper {
  margin: 0 auto;
  margin-top: 100px;
  width: 300px;
}

.search {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  color: white;
  background-color: #6FEB7A;
  line-height: 60px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid white;
  cursor: pointer;
  position: relative;
  bottom: 58px;
  left: 55px;
  outline: None;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.myinput {
  margin: 0 auto;
  display: block;
  height: 48px;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid white;
  outline: none;
  width: 0;
  left: 55px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  position: relative;
}

var inputOpened = false;

function openInput() {
  if (inputOpened) {
    TweenMax.to(".myinput", 0.5, {
      width: 0,left:55
    });
    TweenMax.to(".search", 0.5, {
      rotation: 0,
      left:55
    });
    inputOpened = false;
  } else {
    TweenMax.to(".myinput", 0.5, {
      width: 250,
      left:0
    });
    TweenMax.to(".search", 0.5, {
      rotation: 360,
      left:110,
      onComplete: focusme
    });
    inputOpened = true;
  }
}

function focusme(){
  document.querySelector('.myinput').focus()
}