diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 73b5e866f7..7f70211249 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Accept optional `strategy` for the `anchor` prop ([#3034](https://github.com/tailwindlabs/headlessui/pull/3034))
+- Expose `--input-width` and `--button-width` CSS variables on the `ComboboxOptions` component ([#3057](https://github.com/tailwindlabs/headlessui/pull/3057))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 1c4c88f17a..f5752a0935 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -13,6 +13,7 @@ import React, {
   useReducer,
   useRef,
   useState,
+  type CSSProperties,
   type ElementType,
   type MutableRefObject,
   type FocusEvent as ReactFocusEvent,
@@ -24,6 +25,7 @@ import { useActivePress } from '../../hooks/use-active-press'
 import { useByComparator, type ByComparator } from '../../hooks/use-by-comparator'
 import { useControllable } from '../../hooks/use-controllable'
 import { useDisposables } from '../../hooks/use-disposables'
+import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
@@ -1604,7 +1606,11 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     'aria-multiselectable': data.mode === ValueMode.Multi ? true : undefined,
     id,
     ref: optionsRef,
-    ...(style ? { style } : {}),
+    style: {
+      ...style,
+      '--input-width': useElementSize(data.inputRef, true).width,
+      '--button-width': useElementSize(data.buttonRef, true).width,
+    } as CSSProperties,
   })
 
   // Map the children in a scrollable container when virtualization is enabled
diff --git a/playgrounds/react/pages/combobox/combobox-countries.tsx b/playgrounds/react/pages/combobox/combobox-countries.tsx
index c7acec5884..0ae9a813e1 100644
--- a/playgrounds/react/pages/combobox/combobox-countries.tsx
+++ b/playgrounds/react/pages/combobox/combobox-countries.tsx
@@ -72,8 +72,8 @@ export default function Home() {
                 </Combobox.Button>
               </span>
 
-              <div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
-                <Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
+              <div className="absolute mt-1 rounded-md bg-white shadow-lg">
+                <Combobox.Options className="shadow-xs max-h-60 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
                   {countries.map((country) => (
                     <Combobox.Option
                       key={country}