fix: keep input elements aligned when displaying error message

app/unsubscribe/page.tsx

@@ -80,26 +80,30 @@ export default function Unsubscribe() {
     }
 
     return (
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(handleSubmit)}
-          className='flex items-center justify-center space-x-4'
-        >
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input placeholder='example@example.com' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type='submit'>Submit</Button>
-        </form>
-      </Form>
+      <div className='h-12 align-top'>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className='flex space-x-4'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder='example@example.com' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className='align-top'>
+              <Button type='submit'>Submit</Button>
+            </div>
+          </form>
+        </Form>
+      </div>
     );
   }