JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div class="search-icon hidden-md-up expanding-search-input">
  <form>
    <span class="container"><input type="search" placeholder="Search"></span>
  </form>
</div>

SCSS

.expanding-search-input {
  input {
	outline: none;
  }
  input[type=search] {
  	-webkit-appearance: textfield;
  	-webkit-box-sizing: content-box;
  	font-family: inherit;
  	font-size: 100%;
  }
  input::-webkit-search-decoration,
  input::-webkit-search-cancel-button {
  	display: none;
  }

  input[type=search] {
  	//background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
  	border: solid 1px #ccc;
  	padding: 9px 10px 9px 32px;

  	-webkit-border-radius: 10em;
  	-moz-border-radius: 10em;
  	border-radius: 10em;

  	-webkit-transition: all .5s;
  	-moz-transition: all .5s;
  	transition: all .5s;
  }

  /* Demo 2 */
  input[type=search] {
  	width: 15px;
  	padding-left: 10px;
  	color: transparent;
  	cursor: pointer;
  }

  .container:before {
    font-family: 'Ionicons';
    content: '\f2f5';
    color: red;
    position: absolute;
  }

  input[type=search]:hover {
  	background-color: #fff;
  }
  input[type=search]:focus {
  	width: 130px;
  	padding-left: 32px;
  	color: #000;
  	background-color: #fff;
  	cursor: auto;
  }
  input:-moz-placeholder {
  	color: transparent;
  }
  input::-webkit-input-placeholder {
  	color: transparent;
  }
}