Floating placeholder for a phone-number-input component in React JS

Question

I have been trying to make a floating placeholder for a phone-number-input type.

Is there a way to achieve this !?

Tried to find a resource on the internet that might solve this, also tried on my own. Tried playing around placeholder component with some styling but that didn't help.

Answer 1

<div id="float-label">
  <input type="email" />

  <label htmlFor="email">
    E-mail
  </label>
</div>

#float-label {
  display: flex;
  flex-direction: column;
  min-width: 350px;
position: relative;
}

#float-label input {
  width: 100%;
  height: 56px;
  padding: 14px 16px 0 10px;
  outline: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

#float-label label {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 12px;
  color: #999;
  pointer-events: none;
  position: absolute;
  transform: translate(0, 26px) scale(1);
  transform-origin: top left;
  transition: all 0.2s ease-out;
}
#float-label:focus-within label {
  transform: translate(0, 12px) scale(0.75);
}