JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<div class="media">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSAM1w3828CyPdQ-v_wYpT038oeH6vo5ODFL8PkPTVjcRu343pqnQ" /><input type="text" />
</div>
<div class="edit">zcbh</div>
</section>

CSS

body{
	margin:0;
	padding:0
}
section{
	background: #ececec; /* Old browsers */
}
img{
    display:inline; 
    float:left
}
input{
    display:inline; 
    float:right
}
.media{
	width:6%;
    background:yellow;
	height:26px;
	cursor:pointer;
	display:inline-block;
	transition: width 1s;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */
    -ms-transition: width 1s; /* IE9 (maybe) */
	vertical-align:top;
    overflow:hidden
}
.media:hover{
   /* width:25%;*/
    
}
.edit{
	width:15%;
	height:50px;	
	display:inline-block
}
.edit > div{
	display:inline-block;
	float:left;
	width:auto	
}

JavaScript

$('.media').mouseenter(function(){
    $('img').hide();
    $('.media').width('25%');
});
$('.media').mouseleave(function(){
    setTimeout(function(){
        $('.media').width('6%');
        setTimeout(function(){$('img').show()},1000);
    },3000);
});