JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

Click the button to see if "testing" appears in the input: <button type="button">Test</button><br>
<br>

<div class="hidden">
    <input type="search" placeholder="1234" />
</div>
<br>    
After the input is revealed, type a letter.

CSS

div {
    line-height: normal;
	-webkit-transition: line-height 0.5s ease;
	-moz-transition: line-height 0.5s ease;
	-o-transition: line-height 0.5s ease;
	transition: line-height 0.5s ease;
    overflow: hidden;
    padding: 2px;
    margin: 0;
    background: #ddd;
}
div.hidden {
    height: 1px;
    min-height:0;
	padding: 4px;
	margin: 0;
	line-height: 0;
	cursor: pointer;
}
div.hidden input {
    height: 1px;
	min-height: 0;
	border: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}

JavaScript

$('div').on('mouseover mouseleave', function(e){
    var hide = e.type === 'mouseleave' && $(this).find('input').val() === '';
    $(this).toggleClass('hidden', hide);
});
$('input').on('focus blur', function(e){
    var hide = e.type === 'blur' && this.value === '';
    $(this).parent().toggleClass('hidden', hide);
});

$('button').on('click', function(){
    $('input').val('testing').focus();
    return false;
});