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);
}

<formclass="form"><divclass="field"><inputtype="text"><label>Name</label></div><divclass="field"><inputtype="text"><label>Age</label></div></form>