diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js
index e9cbb87f0d..95ea6f9162 100644
--- a/components/doc/iconfield/basicdoc.js
+++ b/components/doc/iconfield/basicdoc.js
@@ -26,15 +26,17 @@ import { InputText } from "primereact/inputtext";
 
 export default function BasicDemo() {
     return (
-        <IconField iconPosition="left">
-            <InputIcon className="pi pi-search"> </InputIcon>
-            <InputText v-model="value1" placeholder="Search" />
-        </IconField>
+        <div className="flex gap-3">
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText v-model="value1" placeholder="Search" />
+            </IconField>
 
-        <IconField>
-            <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
-            <InputText v-model="value2" />
-        </IconField>
+            <IconField>
+                <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                <InputText v-model="value2" />
+            </IconField>
+        </div>
     )
 }
         `,
@@ -46,15 +48,17 @@ import { InputText } from "primereact/inputtext";
 
 export default function BasicDemo() {
     return (
-        <IconField iconPosition="left">
-            <InputIcon className="pi pi-search"> </InputIcon>
-            <InputText v-model="value1" placeholder="Search" />
-        </IconField>
+        <div className="flex gap-3">
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText v-model="value1" placeholder="Search" />
+            </IconField>
 
-        <IconField>
-            <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
-            <InputText v-model="value2" />
-        </IconField>
+            <IconField>
+                <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                <InputText v-model="value2" />
+            </IconField>
+        </div>
     )
 }
         `
@@ -68,15 +72,17 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
-                <IconField iconPosition="left">
-                    <InputIcon className="pi pi-search" />
-                    <InputText v-model="value1" placeholder="Search" />
-                </IconField>
+                <div className="flex gap-3">
+                    <IconField iconPosition="left">
+                        <InputIcon className="pi pi-search" />
+                        <InputText v-model="value1" placeholder="Search" />
+                    </IconField>
 
-                <IconField>
-                    <InputIcon className="pi pi-spin pi-spinner" />
-                    <InputText v-model="value2" />
-                </IconField>
+                    <IconField>
+                        <InputIcon className="pi pi-spin pi-spinner" />
+                        <InputText v-model="value2" />
+                    </IconField>
+                </div>
             </div>
             <DocSectionCode code={code} />
         </>