JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<div class="search"></div>
<input class="field" placeholder="Search..." type="text"/>

CSS

.search {
  width: 40px;
  height: 40px;
  float: left;
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png');
  background-size: cover;
  border: 1px solid grey;
  box-sizing: border-box;
}

.field {
  display:none;
  width: 200px;
  height: 40px;
  float: left;
  padding: 0 10px;
  box-sizing: border-box;
  outline: none;
}

JavaScript

$( '.search' ).click( function() {

	$( '.field' ).animate({width:'toggle'},200);

});