JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<form class="back">
 
  <input type="text" name="search" class="extand ">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
</form>

CSS

.back {
  padding: 0.5%;
  background: #10314c;
}

.searchicon {
  float: left;
  margin-top: -20px;
  position: relative;
  pointer-events: none;
  top: 26px;
  left: 8px;
  color: white;
  z-index: 2;
}

.extand {
  width: 2.4%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: #10314c;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.extand:focus {
  width: 50%;
  background: white;
}
.extand:focus + span{
  display:none;
}

JavaScript

// for the icon