Hey everyone,

As shown in the video, the two input fields go from being next to each other to under each other, as intended. Now the button is doing the same thing, but I wish the button to always stay under the two forms as shown when it's in mobile view.

I would love to know how to fix this. Very much appreciated.

Below here is the form snippet:

return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className='flex flex-col md:flex-row font-mono'
      >
        <div className='w-full md:w-1/2'>
          <FormField
            control={form.control}
            name='title'
            render={({ field }) => (
              <FormItem>
                <FormLabel>TITLE *</FormLabel>
                <FormControl>
                  <Input
                    className='bg-outline text-primary'
                    placeholder='Please enter a title'
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>
        <div className='w-full md:w-1/2'>
          <FormField
            control={form.control}
            name='title'
            render={({ field }) => (
              <FormItem>
                <FormLabel>TITLE *</FormLabel>
                <FormControl>
                  <Input
                    className='bg-outline text-primary'
                    placeholder='Please enter a title'
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>
        <div>
          <Button type='submit'>SUBMIT</Button>
        </div>
      </form>
    </Form>
  );