place a label on top of input tag
<p>How can I place label on top of the input tag, by default it is placed inside of the input tag when I click on it, it jumps to the top of the input tag,</p>

<p>This is my attempt:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: #fafafa;
  color: #636363;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #757575;
}
input:focus {
  outline: none;
}
/* Label */

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

input:focus ~ label,
input.used ~ label {
  top: -20px;
  -webkit-transform: scale(.75);
  transform: scale(.75);
  left: -2px;
  /* font-size: 14px; */
  color: #000;
}
/* Underline */

.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4a89dc;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}
/* active */

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}
/* Highlight */

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
/* active */

input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="group"&gt;
  &lt;input type="text" name="name" placeholder="" readonly&gt;
  &lt;span class="highlight"&gt;
        &lt;/span&gt;&lt;span class="bar"&gt;&lt;/span&gt;
  &lt;label&gt;FULLNAME&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Please how can I place the label on top of the input tag permanently. At the moment it is placed on the input tag and on clicking to it, it jumps to the top of the tag</p>