Cacher is the code snippet organizer for pro developers

<!-- SCSS -->
<style>
	.wrapper-search-field{
		border-right: 1px solid #fff;
		cursor: pointer;
		height: 1.5em;
		padding-right: 15px;
		position: absolute;
		right: 200px;
		width: 30px;
		display: flex;
		i{
			color: #fff;
			font-size: 20px;
			padding-right: 5px;
		}
		.form-group{
			border-bottom: 1px solid rgba(255, 255, 255, 0.7);
			overflow: hidden;
			margin: 0;
			flex-grow: 1;
			input{
				background-color: transparent;
				border: none;
				color: #fff;
				display: inline-block;
				width: calc(100% - 25px);
				&:invalid + i{
					display: none;
				}
				&::placeholder{
					color: 	rgba(255, 255, 255, 0.5);
					padding-left: 5px;
				}
			}
		}
	}
</style>

<!-- HTML -->
<div class="wrapper-search-field">
	<i class="icon-search"></i>
	<div class="form-group">
		<input type="text" class="search-field" placeholder="Search" required="required">
		<i class="icon-remove"></i>
	</div>
</div>

<!-- JS -->
<script>
  $('.wrapper-search-field')
      .on('click', '.icon-search', function(event) {
          $('.search-field')
              .focus();
      })
      .on('click', '.icon-remove', function(event) {
          $('.search-field')
              .val('');
      })
      .on('focus', '.search-field', function(event) {
          $('.wrapper-search-field')
              .animate({width: '350px'}, 500);
      })
      .on('blur', '.search-field', function(event) {
          $('.wrapper-search-field')
              .animate({width: '30px'}, 500);
      });
</script>