<div>这是一个Input↑</div>
<input placeholder="我是一个input">

div {
    position: absolute;
    left:40%;
    top: 50px;
    font-size: 20px;
}
    input {
        position: absolute;
        right:50%;
        margin-left: 200px;
        height: 30px;
        width: 30px;
        transition: width .6s ease-out,visibility .6s 1ms ease-out
    }
    
    input:hover {
        height: 30px;
        width: 200px;
        transition: width .6s ease-out,visibility .6s 1ms ease-out
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.