How do I create permanent placeholders? CSS / HTML

Question

I am working on a web form for my first official development job.

I am currently trying to make it so that my input fields placeholders don't disappear but instead i need them to shrink and move to the top of the input field. I was able to find some code that should be getting the job done but is not. Can anyone guide me on how to make this work?

Code I found: https://jsfiddle.net/p19j2nm5/

I've worked on this for hours trying all sorts of variations with no luck.

.wrapper /*wpcf7*/{
    position:relative;
}

input {
  font-size: 14px;
  height: 40px;

}

.placeholder{
  position:absolute;
  font-size: 25px;
  pointer-events:none;
  left: 1px;
  top: 1px;
  transition: 0.1s ease all;
}

input:focus ~ .placeholder{
  top: 1px;
  font-size: 11px;
}

HTML from contact form 7:

<label> First Name:
[text first-name placeholder "First Name"] </label>


<label> Last Name:
    [text* last-name placeholder "Last Name"] </label>


<label> Your Email:
    [email* your-email placeholder "Example@Example.com"] </label>

Currently, none on my fields placeholders move when focused, but removing "~.placeholder" does make the field shrink when focused.

Example of what I am trying to get my fields to do:

Answer 1

input:focus ~ .lastname_floating-label,
input:focus ~ .firstname_floating-label,
input:not(:focus):valid ~ .firstname_floating-label,
input:not(:focus):valid ~ .lastname_floating-label{
  top: 2px;
  left: 2px;
  bottom: 2px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.firstname_floating-label, .lastname_floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: 0.2s ease all;
}
div{position:relative;}

<div>
  <input type="text" class="inputText" required/>
  <span class="firstname_floating-label">Firstname</span>
</div>
<div>
  <input type="text" class="inputText" required/>
  <span class="lastname_floating-label">Lastname</span>
</div>

Ok I changed according your request. Other examples are wrong. Try to add more input and you can check that the place holder will be positioned in the first input. And than if you focus out the placeholder will cover the typed value.

Check this example if is ok using only HTML and CSS.