Label with for tag positioned outside of intended element
<p>I have a form that has a few basic input controls on it. Each one has a label with a span used for displaying error messages upon validation.</p>

<p>The issue is that for some reason that I cannot seem to figure out when I click the submit button with an error on the form the label shows but it shows up at the bottom of the form beside the submit button instead of inside the element input control where the error is.</p>

<p>When I inspect the page the label is in the correct dom of the form but the positioning is off even though I am using the absolute position.</p>

<p>Form code</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-html lang-html prettyprint-override"><code>&lt;section&gt;
  &lt;div class="block color-scheme-1"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-8 col-sm-8 col-md-offset-2  col-md-offset-2"&gt;
          &lt;div class="section-sub-title center"&gt;
            &lt;article class="section-title-body white"&gt;
              &lt;h1 class="head-title"&gt;&lt;span&gt;Adress&lt;/span&gt; Information&lt;/h1&gt;
            &lt;/article&gt;
          &lt;/div&gt;
          &lt;div class="text-center white"&gt;
            &lt;h4 class="widget-title"&gt;Mosaic Design Studio &lt;br&gt;&lt;br&gt;Avanue street 255, NA&lt;/h4&gt;

          &lt;/div&gt;
          &lt;div class="text-center white"&gt;
            &lt;p&gt;(10 808) 321-1785-952
              &lt;br&gt;(10 808) 321-1785-953
            &lt;/p&gt;
            &lt;p&gt;mosaic-design@domain.com
              &lt;br&gt;support@yoursite.com
            &lt;/p&gt;
            &lt;br&gt;
            &lt;br&gt;
          &lt;/div&gt;
          &lt;div class="section-sub-title center"&gt;
            &lt;article class="section-title-body white"&gt;
              &lt;h1 class="head-title"&gt;&lt;span&gt;Send&lt;/span&gt; Massage&lt;/h1&gt;
            &lt;/article&gt;
          &lt;/div&gt;
          &lt;div id="form-wrapper"&gt;
            &lt;div id="form-inner"&gt;
              &lt;div id="ErrResults"&gt;
                &lt;!-- Error Here --&gt;
              &lt;/div&gt;
              &lt;div id="MainResult"&gt;
                &lt;!-- Response Here --&gt;
              &lt;/div&gt;
              &lt;div id="MainContent"&gt;
                &lt;form id="MyContactForm" name="MyContactForm" method="post"&gt;
                  &lt;p class="name"&gt;
                    &lt;input type="text" name="name" id="name" placeholder="Your Name"&gt;
                    &lt;label for="name" id="nameLb"&gt;&lt;span class="error"&gt;*Name Field Required&lt;/span&gt;
                    &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                    &lt;input type="email" name="email" id="email" placeholder="Your Email"&gt;
                    &lt;label for="email" id="emailLb"&gt;
                      &lt;span class="error error1"&gt;*Email Field Required&lt;/span&gt; 
                      &lt;span class="error error2"&gt;*Email Not Valid&lt;/span&gt;
                    &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                    &lt;input type="text" name="phone" id="phone" placeholder="Your Telephone"&gt;
                    &lt;label for="phone" id="phoneLb"&gt;&lt;span class="error"&gt;*Telephone Field Required&lt;/span&gt;
                    &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;p class="textarea"&gt;
                    &lt;textarea name="message" id="message" placeholder="Your Message" rows="4"&gt;&lt;/textarea&gt;
                    &lt;label for="message" id="messageLb"&gt;&lt;span class="error"&gt;*Message Field Required&lt;/span&gt;
                    &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;div class="text-center"&gt;
                    &lt;a href="#" class="contact-btn"&gt;Send Message&lt;/a&gt; 
                  &lt;/div&gt;

                &lt;/form&gt;
              &lt;/div&gt;
              &lt;!--MainContent--&gt;
            &lt;/div&gt;
            &lt;!--form-inner--&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>CSS</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>#form-wrapper #MyContactForm .error {
  bottom: 30px;
  color: #FF2255;
  font-family: inherit;
  font-size: 12px;
  font-weight: normal;
  left: auto;
  letter-spacing: 0;
  position: absolute;
  right: 20px;
  text-transform: capitalize;
  width: auto;
}</code></pre>
</div>
</div>
</p>