diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 449aeaf7..00088b5f 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -20,15 +20,16 @@ export const FieldWrapper = ({
 }: FieldWrapperProps) => (
   <div className="pt-6 sm:pt-5">
     <fieldset aria-labelledby="label-notifications">
-      <div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4">
+      {/* first column = labels/heading, second column = fields, third column = gutter  */}
+      <div className="grid md:grid-cols-[1fr_2fr] lg:grid-cols-[1fr_2fr_1fr] sm:items-baseline gap-4">
         <Label htmlFor={fieldName}>{label}</Label>
-        <div className="sm:col-span-2">
+        <div className="max-w-3xl">
           <div className="max-w-lg">
             <p className="text-sm text-slate-400">{description}</p>
             <p hidden={valid ?? true} className="text-sm text-red-500">
               {validationText}
             </p>
-            <div className="mt-4 space-y-4">
+            <div className="mt-4 space-y-4 sm:col-span-2">
               <div className="flex items-center">{children}</div>
             </div>
           </div>