problem using with valid/invalid pseudoclass

Question

I am trying to make a form using HTML and CSS only. The problem is i am using valid pseudo-class to just give animation, but when it is invalid it mixes up with the label. the code will be at https://codepen.io/hardik-g1/pen/mdVzMyL and if you don't get please try this type number in name field you will see the problem. code:

<div id="fle">
<div class="container">
  <h2 id="aa">HACKATHON REGISTRATION</h2>
 <form action="">
   <div class="group">      
      <input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
      <label class="set">First Name</label>
     
    </div>
   <div class="group">      
      <input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
     <label class="set">Last Name</label></p>
    </div>
   <div class="group">      
      <input type="email" value="" required>
      <label class="set">Email</label>
    </div> 
   <div class="group">      
      <input type="number" value="" required pattern="[0-9].{10}" title="Enter correct mobile number">
      <label class="set">Mobile number</label>
    </div>
   <div class="group">
     <p>Branch</p>
      <select name="branch" id="" required><option value=" ">Please select your branch</option><option value="cs">Computer Science</option>
        <option value="it">Information Technology</option>
      </select>
      
    </div>
  <div class="group"><p>Do you have participated before?</p>
  Yes<input id="a" type="radio" name="hosting" value="yes">
   No<input type="radio" id="a" name="hosting" value="no">
  </div>
  
<div class="group" id="c">
  <p>Project Description</p>
  <textarea name="comment" placeholder="Write Here" rows="4" cols="40" required></textarea>
  </div>
  <input id="b" type="checkbox" id="Agree" name="agree" value="yes" required> Click here to agree to all the information above is true.
  <p><button class="button" type="submit"><span>Register</span></button></p>
  
  </form>
 </div>
     <div>
    <video id="video" width="860" onclick="play();">
        <source type="video/webm" src="https://res.cloudinary.com/iatneh/video/upload/v1594920650/Virtual_Hackathon_copy_-_Biteable_kmyhcp.mp4"/>
    </video>
       <h1>Click on it to play</h1>
       <p>All validations show when submitted</p>
</div>
</div>

CSS

#fle{
  display:flex;
}
body{
  color:#999; 
}
#aa{
  color:black;
}
#b{
  width: 12.5px;
  margin:0; 
}
#c{
  margin:10px 0;
}
#a{
  width:30px;
  color:#999; 
}
select{
  width: 300px;
  height: 30px;
}

.container { 
  font-family:'Roboto';
  width:600px;  
  background:#FFF;
  padding:10px 50px 50px;
}
.group { 
  position:relative; 
  margin-bottom:30px; 
}
input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus{ outline:none; }

label   {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all;
}

input:focus ~ label, input:valid ~ label {
   top:-20px;
  font-size:14px;
  color:#5264AE;
}
input:invalid ~ label{
  opacity:0.4;
}
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border:None;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

Answer 1

You can listen to input changes and if it has a value inside add a class to keep the label floating.

Here is a sample you can modify and use it in your code (it will keep the .floating class on label as long has the input has content in it):

function checkForInput(element) {
  const $label = $(element).siblings('label');

  if ($(element).val().length > 0) {
    $label.addClass('floating');
  } else {
    $label.removeClass('floating');
  }
}


$('input.input').on('change keyup', function() {
  checkForInput(this);  
});

label.floating {
  color:#5264AE;
  /* use styles for floating your labels here */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <input type="text" name="some-name" class="input" />
  <label class="input-label" for="textdemo">label</label>
</div>