diff --git a/webcompat/static/css/src/issue-wizard-animations.css b/webcompat/static/css/src/issue-wizard-animations.css
index d1010107d..22e8d85fd 100644
--- a/webcompat/static/css/src/issue-wizard-animations.css
+++ b/webcompat/static/css/src/issue-wizard-animations.css
@@ -5,14 +5,14 @@
 @keyframes validated {
   0% {
     opacity: 0;
-    transform: scale(.8);
+    transform: scale(.8) translateY(-50%);
   }
   50% {
-    transform: scale(1.3);
+    transform: scale(1.3) translateY(-50%);
   }
   100% {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) translateY(-50%);
   }
 }
 
diff --git a/webcompat/static/css/src/issue-wizard.css b/webcompat/static/css/src/issue-wizard.css
index 340724582..77e156821 100644
--- a/webcompat/static/css/src/issue-wizard.css
+++ b/webcompat/static/css/src/issue-wizard.css
@@ -443,8 +443,8 @@
   transition: box-shadow .3s;
 }
 
-.with-validation-icons.is-validated::after,
-.with-validation-icons.is-error::before {
+.with-validation-icons.is-validated .input-wrapper::after,
+.with-validation-icons.is-error .input-wrapper::before {
   align-items: center;
   animation-duration: .25s;
   animation-fill-mode: forwards;
@@ -453,7 +453,6 @@
   background-repeat: no-repeat;
   background-size: 50%;
   border-radius: 50%;
-  bottom: 4px;
   content: "";
   display: flex;
   height: 19px;
@@ -461,25 +460,28 @@
   opacity: 0;
   position: absolute;
   right: 8px;
-  top: auto;
+  top: 50%;
   transition: opacity .2s;
   width: 19px;
   z-index: 2;
 }
 
-.with-validation-icons.is-validated::after {
+.with-validation-icons .input-wrapper {
+  position: relative;
+}
+
+.with-validation-icons.is-validated .input-wrapper::after {
   background-color: var(--issue-selected-outline);
   background-image: url("../../img/svg/icons/svg-check-issue.svg");
 }
 
-.with-validation-icons.is-error::before {
+.with-validation-icons.is-error .input-wrapper::before {
   background-color: var(--wizard-step-error);
   background-image: url("../../img/svg/icons/svg-cross-white.svg");
 }
 
-.low.is-validated::after,
-.low.is-error::before {
-  bottom: 32px;
+.low.is-validated .input-wrapper::after,
+.low.is-error .input-wrapper::before {
   height: 20px;
   right: 18px;
   width: 20px;
@@ -1052,24 +1054,21 @@
     padding: 25px 0 14px 0;
   }
 
-  .with-validation-icons.is-validated::after,
-  .with-validation-icons.is-error::before {
-    bottom: 8px;
+  .with-validation-icons.is-validated .input-wrapper::after,
+  .with-validation-icons.is-error .input-wrapper::before {
     height: 24px;
     right: 8px;
     width: 24px;
   }
 
-  .low.is-validated::after,
-  .low.is-error::before {
-    bottom: 23px;
+  .low.is-validated .input-wrapper::after,
+  .low.is-error .input-wrapper::before {
     height: 20px;
     width: 20px;
   }
 
-  .step-custom-browser .low.is-validated::after,
-  .step-custom-browser .low.is-error::before {
-    bottom: 22px;
+  .step-custom-browser .low.is-validated .input-wrapper::after,
+  .step-custom-browser .low.is-error .input-wrapper::before {
     right: 8px;
   }
 
diff --git a/webcompat/static/js/lib/wizard/ui-utils.js b/webcompat/static/js/lib/wizard/ui-utils.js
index 222450b8c..cbe410119 100644
--- a/webcompat/static/js/lib/wizard/ui-utils.js
+++ b/webcompat/static/js/lib/wizard/ui-utils.js
@@ -45,9 +45,12 @@ export const showError = (el, text) => {
   // if the helper already in place, don't create a new one
   if (helper.length) return;
 
-  const inlineHelp = createInlineHelp(text);
+  //wrapper
+  const wrapper = el.parents(".input-wrapper");
 
-  inlineHelp.insertBefore(el);
+  const inlineHelp = createInlineHelp(text);
+  // just in case the wrapper doesn't exist
+  wrapper ? inlineHelp.insertBefore(wrapper) : inlineHelp.insertBefore(el);
 };
 
 export const showSuccess = (el) => {
diff --git a/webcompat/templates/issue-wizard-form.html b/webcompat/templates/issue-wizard-form.html
index 5dafc6f33..3dfea0a9b 100644
--- a/webcompat/templates/issue-wizard-form.html
+++ b/webcompat/templates/issue-wizard-form.html
@@ -32,10 +32,11 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
                 <small class="form-message-error">{{ error }}</small>
               {% endfor %}
             {% endif %}
-
+            <div class="input-wrapper">
             {{ form.url(class_='form-field text-field required',
                 placeholder='e.g. https://example.com',
                 required=True, type='url', pattern='') }}
+            </div>
           </div>
         </div>
       </div>
@@ -165,11 +166,15 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
           <div class="row mobile-col">
             <div class="form-element js-Form-group low with-validation-icons half">
               {{ form.browser.label(class_='form-label') }}
-              {{ form.browser(class_='form-field text-field') }}
+              <div class="input-wrapper">
+                {{ form.browser(class_='form-field text-field') }}
+              </div>
             </div>
             <div class="form-element js-Form-group low with-validation-icons half">
               {{ form.os.label(class_='form-label') }}
-              {{ form.os(class_='form-field text-field') }}
+              <div class="input-wrapper">
+                {{ form.os(class_='form-field text-field') }}
+              </div>
             </div>
           </div>
         </div>