Floating label with CSS

Question

I have a generated form using formIo and a need to add some style to this form.

i want to make label floating up when i focus to the input, only with CSS

this is the generated html and my css that i use to reach this goal:

.ff-container {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}

.ff-label,
.ff-input {
  transition: all 0.2s;
  touch-action: manipulation;
}

.ff-input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

.ff-input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

.ff-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/*i need to add here :placeholder-shown to the input but i dont know how i do it*/

.ff-container:focus-within > div+label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
}

<div class="ff-container">
  <div class="ff-sub-container">
    <input type="text" class="ff-input" placeholder="Your name here ..">
  </div>
  <label class="ff-label">Name</label>
</div>

PS:if you need more information, please let me know

Answer 1

Give this a spin. when you focus the input the label appears next to the input. Other than that your question lacked general direction and gave no desired visuals so you will need to tweak the rest of the code to fit your needs.

.hidden {
  display: none;
}
.form-group {
  position: relative;
  padding: 20px 0 0 0;
}
.form-control {
  width: 50%;
}
.form-control:focus + label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  color: white;
  width: 50px;
  display: inline-flex;
}

<div ref="element" class="form-group">
    <input  class="form-control" type="text" ref="input">
    <label class="col-form-label hidden">Test</label>
 </div>