How do I position a dynamically created element on a web page using Javascript?

I've created a simple contact page and want to add a little flair to it. I've created a dynamic element but I don't know what properties of a DOM object to use for element placement. The image below is my Contact form. All I want to do is when I click within one of the input fields is move the text that is already in their to just above and the textbox. I would like to do it with animation also but that I could probably figure out.

ThanksAttachment 188691

The keyword you're looking for is "floating label". Can you provide me with the CSS that you're using to style your current inputs/labels?

Update - Here is an example without knowing your current style rules:

HTML Code:

---

<div class="form-group">
  <input type="text" id="username" class="form-control" required placeholder="Username">
  <label for="username" class="floating-label">Username</label>
</div>
<div class="form-group">
  <input type="password" id="password" class="form-control" required placeholder="Password">
  <label for="password" class="floating-label">Password</label>
</div>

---

Code:

---

.form-group {
    position: relative;
    margin: 20px;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

.floating-label {
    position: absolute;
    left: 10px;
    top: 10px;
    transform: translateY(0);
    transition: all 0.3s ease;
    pointer-events: none;
    color: #333;
}

.form-control::placeholder {
    color: transparent;
}

.form-control:not(:placeholder-shown) + .floating-label,
.form-control:focus + .floating-label {
    top: -20px;
    transform: translateY(0);
    font-size: 12px;
    color: #333;
}

---

Fiddle: https://jsfiddle.net/g9vtc2bq/