diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
index 89f009906d5177..a54ed776610619 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.js
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -33,6 +33,8 @@ const InputWrapper = styled('div')`
     font-size: 14px;
     line-height: 26px;
     padding: 2px 6px;
+    width: 0;
+    min-width: 30px;
     flex-grow: 1;
     border: 0;
     outline: 0;
diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
index 7063d92a75b993..1d599d1cff7f79 100644
--- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx
+++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -33,6 +33,8 @@ const InputWrapper = styled('div')`
     font-size: 14px;
     line-height: 26px;
     padding: 2px 6px;
+    width: 0;
+    min-width: 30px;
     flex-grow: 1;
     border: 0;
     outline: 0;
@@ -78,8 +80,7 @@ const Tag = styled(({ label, onDelete, ...props }) => (
 
 const Listbox = styled('ul')`
   width: 300px;
-  margin: 0;
-  margin-top: 2px;
+  margin: 2px 0 0;
   padding: 0;
   position: absolute;
   list-style: none;