input聚焦，label上移效果

有一个输入框，有一行lable提示文案，当输入框聚焦，文案上移

<div class="input-area">
    <input type="text" class="__input" required />
    <label for="" class="__tip">Input...</label>
</div>

.input-area {
    background-color: pink;
    width: 593px;
    height: 83px;
    display: flex;
    position: relative;
}
.__input {
    width: 80%;
    height: 33px;
    border: none;
    position: absolute;
    top: 20px;
    left: 50px;
}
.__input:valid ~ .__tip,
.__input:focus ~ .__tip {
    transform: translateY(-25px);
}
.__input:focus {
    border: none;
    outline: none;
}
.__tip {
    position: absolute;
    left: 60px;
    top: 25px;
    pointer-events: none;
    transition: all 0.3s ease;
}