A demo of creating floating labels as using CSS float property

CSS Code
Output
<!DOCTYPE html>
<html>
<head>
 <style>
 * {
  box-sizing: border-box;
}

body {
  background: #C4E1E1;
  font-family: Verdana, sans-serif;
}

.page-wrap {
  max-width: 500px;
  margin: 0 auto;
}

h2 {
  color: #408080;
  font-size: 20px;
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
  font-size: 0.75em;
  color: #8e44ad;
  top: -2.25rem;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.floating-field {
  float: right;
  width: 33.3333%;
  margin: 2rem 0 1rem;
  position: relative;
  border:1px black #2C5656;
}
.floating-field label {
  color: #C5E2E2;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s ease-in-out(0.2, 0, 0.03, 1);
  transition: all 0.25s ease-in-out;

}
.floating-field.wide {
  width: 100%;
}

input, textarea {
  padding: 1rem 1rem;
  border: 1px solid #008000;
  width: 100%;
  font-size: 1rem;
}
input ~ span, textarea ~ span {
  display: block;
  width: 0;
  height: 3px;
  background: #8e44ad;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}
input:focus, textarea:focus {
  outline: 0;
}
input:focus ~ span, textarea:focus ~ span {
  width: 100%;
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

textarea {
  width: 100%;
  min-height: 13em;
}
 </style>

</head>
<body>
<div class="page-wrap">
  <h2>A pure CSS floating label solution</h2>
  <form>
    <div class="floating-field">
      <input type="text" required />
      <label>Your Name</label>
      <span></span>
    </div>
    <div class="floating-field">
      <input type="email" required />
      <label>Your Email</label>
      <span></span>
    </div>
    <div class="floating-field">
      <input type="tel" required />
      <label>Mobile No:</label>
      <span></span>
    </div>
    <div class="floating-field wide">
      
      
      <!--Textarea code here-->
      <label>Feedback / Enquiry</label>
      <span></span>
    </div>
  </form>
</div>
</body>
</html>