JSFiddle - React, Tailwind, and code Playground

HTML

<form>
	<div id="search">
        <input type="checkbox" value="" id="check">
        <label for="check" class="l"></label>
        <input type="search" value="Поиск" class="search">	
	</div>
            
    <div class="box"></div>
</form>

CSS

form {
    font-size: 0;
}
#search{
    font-size: 12px;
	display:inline-block;
	padding:2px 0;
	height:36px;
    
    vertical-align: middle;
    
	background:#4693b6;
}
#check{
	position:absolute;
	left:-999px;
}
#search label[for="check"]{
	margin-top:-2px;
	width:40px;
	height:40px;
	background:url(../i/search_close.jpg) no-repeat;
	float:left;
}
#search input[type="search"]{
	background:none;
	border:none;
	background:#fff;
	padding:0;
    overflow:hidden;
	width:0;
	height:36px;
	color:#6c6c6c;
	font:21px arial, sans-serif;
	-webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
#search input[type=checkbox]:checked ~ input[type="search"]{
	width:178px;
	border-right:2px solid #4693b6;
}


.box {
    display: inline-block;
    width: 30px;
    height: 30px;
    
    vertical-align: middle;
    
    background: red;
}