label focus not working when the input is non required and if i am using [required] css its working but return initial place - user-interface

Question

can anyone help me? in below that is my code, in that label focus not working when the phone number input field without required. if am using [required] in css its working when i click the input the label going top but its again returns down to the initial value and the label overlapping the given input
Document
#welcome-form {
flex-direction: column;
position: absolute;
height: 220px;
width: 100%;
background-color: white;
border-top-left-radius: 200px 102px;
bottom: 48px;
}
.welcome-form-item {
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0;
width: 80%;
margin-left: 50px;
width: 80%;
}
.welcome-form-item-textbox {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.welcome-form-item label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.welcome-form-item span::before {
content: '';
background-color: #303041;
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
transition: .5s;
}
.welcome-form-item-textbox:focus\~label,
.welcome-form-item-textbox\[required\]:valid\~label {
top: -5px;
color: #adadad;
}
.welcome-form-item-textbox:focus\~span::before,
.welcome-form-item-textbox\[required\]:valid\~span::before {
width: 100%;
}
#welcome-form-item-button {
color: #ffffff;
vertical-align: bottom;
border: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
font-weight: bold;
font-size: .75rem;
line-height: 2;
border-radius: 2px 60px;
display: block;
width: 80%;
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
font-size: 19px;
margin-left: 50px;
margin-top: 20px;
text-spacing: .5;
}
#welcome-form-item-button:hover {
background-color: #303041;
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 10%);
}
<div class="welcome-form-item">
<input class="welcome-form-item-textbox" type="text" id="name" name="name" required>
<span></span>
<label for="name">Name</label>
</div>
<div class="welcome-form-item">
<input class="welcome-form-item-textbox" type="text" id="phone_number" name="phone_number">
<span></span>
<label for="phone_number">Phone Number</label>
</div>
<div>
<button id="welcome-form-item-button" type="button">Start
Conversation</button>
</div>
</form>
`this is my output`
enter image description here