diff --git a/src/Components/Form/Form.scss b/src/Components/Form/Form.scss
index 658b6cd0..eabbfd10 100644
--- a/src/Components/Form/Form.scss
+++ b/src/Components/Form/Form.scss
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  margin-bottom: $cf-marg-b;
+  margin-bottom: $cf-marg-a;
 }
 
 /*
@@ -36,6 +36,12 @@
   @extend %no-user-select;
 }
 
+.cf-form--element-error-container {
+  position: relative;
+  height: 20px;
+  width: 100%;
+}
+
 .cf-form--label {
   width: 100%;
   color: $cf-label--default;
@@ -60,6 +66,7 @@
 }
 
 .cf-form--element-error {
+  position: absolute;
   line-height: 16px;
   color: $c-dreamsicle;
   margin: $cf-marg-a 0 0 0;
diff --git a/src/Components/Form/FormElement.tsx b/src/Components/Form/FormElement.tsx
index 87a02a86..b23b4461 100644
--- a/src/Components/Form/FormElement.tsx
+++ b/src/Components/Form/FormElement.tsx
@@ -59,13 +59,15 @@ export const FormElement = forwardRef<FormElementRef, FormElementProps>(
           </FormLabel>
         )}
         {children}
-        {!!errorMessage && (
-          <FormElementError
-            testID={errorMessageTestId}
-            message={errorMessage}
-          />
-        )}
-        {!!helpText && <FormHelpText text={helpText} />}
+        <div className="cf-form--element-error-container">
+          {!!errorMessage && (
+            <FormElementError
+              testID={errorMessageTestId}
+              message={errorMessage}
+            />
+          )}
+          {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
+        </div>
       </>
     )
 
diff --git a/src/Components/Form/FormValidationElement.tsx b/src/Components/Form/FormValidationElement.tsx
index b30cad25..61a01485 100644
--- a/src/Components/Form/FormValidationElement.tsx
+++ b/src/Components/Form/FormValidationElement.tsx
@@ -99,8 +99,10 @@ export const FormValidationElement = forwardRef<
           </FormLabel>
         )}
         {children(status)}
-        {!!errorMessage && <FormElementError message={errorMessage} />}
-        {!!helpText && <FormHelpText text={helpText} />}
+        <div className="cf-form--element-error-container">
+          {!!errorMessage && <FormElementError message={errorMessage} />}
+          {!!helpText && !errorMessage && <FormHelpText text={helpText} />}
+        </div>
       </label>
     )
   }