fix: keep input elements aligned when displaying error message

app/page.tsx

@@ -80,10 +80,11 @@ export default function Home() {
     }
 
     return (
+      <div className='h-12 align-top'>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
-          className='flex items-center justify-center space-x-4'
+            className='flex space-x-4'
           >
             <FormField
               control={form.control}
@@ -97,9 +98,12 @@ export default function Home() {
                 </FormItem>
               )}
             />
+            <div className='align-top'>
               <Button type='submit'>Submit</Button>
+            </div>
           </form>
         </Form>
+      </div>
     );
   }
 

app/unsubscribe/page.tsx

@@ -80,10 +80,11 @@ export default function Unsubscribe() {
     }
 
     return (
+      <div className='h-12 align-top'>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
-          className='flex items-center justify-center space-x-4'
+            className='flex space-x-4'
           >
             <FormField
               control={form.control}
@@ -97,9 +98,12 @@ export default function Unsubscribe() {
                 </FormItem>
               )}
             />
+            <div className='align-top'>
               <Button type='submit'>Submit</Button>
+            </div>
           </form>
         </Form>
+      </div>
     );
   }
 

components/ui/form.tsx

@@ -133,7 +133,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn('text-sm text-muted-foreground', className)}
       {...props}
     />
   );
@@ -147,21 +147,22 @@ const FormMessage = React.forwardRef<
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
-  }
-
   return (
+    <>
+      {!body ? null : (
         <p
           ref={ref}
           id={formMessageId}
-      className={cn('text-destructive text-sm font-medium', className)}
+          className={cn('text-sm font-medium text-destructive', className)}
           {...props}
         >
           {body}
         </p>
+      )}
+    </>
   );
 });
+
 FormMessage.displayName = 'FormMessage';
 
 export {