How to position Dialog.Panel on the right side of the screen

[sp88011]

I'm new to headlessUI so apologies if the solution to this may be obvious...

I'm wondering how to position the Dialog.Panel at the right side of the screen and only have it take up a certain width

The reason I need to limit the width is that I need to click outside the panel in order to close it (ie the grey area). If I'm not limiting its width, there's no outside area to click on.

import { Dialog } from "@headlessui/react";
...
<div className="flex">
      <button
        className="p-3 border-2 border-cyan-100"
        onClick={() => setIsOpen(true)}
      >
        Open/Close
      </button>
      <Dialog
        className="relative z-50"
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
        <div className="fixed inset-0">

          <Dialog.Panel className="h-screen max-w-md">
            <div className="flex justify-end h-full">
              <div className="grow bg-red-400">block 1</div>
              <div className=" grow bg-green-400">block 2</div>
            </div>
          </Dialog.Panel>
        </div>
      </Dialog>
    </div>