Move Label Of Input Box When A User Focuses On This Without Require

I want to move a label above an input box when a user focuses on the input box. There is an answer here, however, there are some differences. I can't use required as I am using cus

Solution 1:

To create this with just css you need to change order of input and label so you can use + selector. Then you can use transform: translate() on label when you focus input

form {
  display: inline-block;
}
.field {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
label {
  order: -1;
  padding-left: 5px;
  transition: all 0.3s ease-in;
  transform: translateY(20px);
  pointer-events: none;
}
input:focus + label {
  transform: translateY(-2px);
}

<form class="form">
  <div class="field">
    <input type="text">
    <label>Name</label>
  </div>

  <div class="field">
    <input type="text">
    <label>Age</label>
  </div>
</form>