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">
  <div class="form-field">
    <i class="fa fa-search searchicon" aria-hidden="true"></i>
    <input placeholder="Search..." type="text" name="search" class="extand ">
  </div>
  
  <span class="other">Some other element</span>
</form>

CSS

.back{
  padding: 10px;
  background: #10314c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-field {
  position: relative;
}

.form-field i {
  transition: all 0.2s ease-in;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  left: 10px;
  top: 50%;
}

.form-field input {
  transition: all 0.2s ease-in;
  background: transparent;
  border: 1px solid white;
  border-radius: 4px;
  padding: 5px 10px 5px 30px;
  color: white;
  width: 120px;
}

.form-field.active i {
  color: black;
}

.form-field.active input {
  background: white;
  color: black;
  width: 300px;
}
.other {
  color: white;
}

JavaScript

$(".form-field input").on('focus blur', function() {
	$(this).parent().toggleClass('active');
})