From c6473d555e5cc4a64db15a43b021b79c1614daa6 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 30 May 2024 08:58:24 -0700
Subject: [PATCH] [docs] Clean up append/prepend example slightly

---
 .../src/views/form_controls/prepend_append.js | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/eui/src-docs/src/views/form_controls/prepend_append.js b/packages/eui/src-docs/src/views/form_controls/prepend_append.js
index 4e5751a1222..3dad35c7594 100644
--- a/packages/eui/src-docs/src/views/form_controls/prepend_append.js
+++ b/packages/eui/src-docs/src/views/form_controls/prepend_append.js
@@ -1,6 +1,7 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
+  EuiFlexGroup,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiFieldText,
@@ -19,24 +20,24 @@ export default () => {
   const [isReadOnly, setReadOnly] = useState(false);
 
   return (
-    <Fragment>
-      <EuiSwitch
-        label="compressed"
-        checked={isCompressed}
-        onChange={(e) => setCompressed(e.target.checked)}
-      />
-      &emsp;
-      <EuiSwitch
-        label="disabled"
-        checked={isDisabled}
-        onChange={(e) => setDisabled(e.target.checked)}
-      />
-      &emsp;
-      <EuiSwitch
-        label="readOnly"
-        checked={isReadOnly}
-        onChange={(e) => setReadOnly(e.target.checked)}
-      />
+    <>
+      <EuiFlexGroup responsive={false}>
+        <EuiSwitch
+          label="compressed"
+          checked={isCompressed}
+          onChange={(e) => setCompressed(e.target.checked)}
+        />
+        <EuiSwitch
+          label="disabled"
+          checked={isDisabled}
+          onChange={(e) => setDisabled(e.target.checked)}
+        />
+        <EuiSwitch
+          label="readOnly"
+          checked={isReadOnly}
+          onChange={(e) => setReadOnly(e.target.checked)}
+        />
+      </EuiFlexGroup>
       <EuiSpacer />
       <EuiFieldText
         placeholder="String & text in a tooltip"
@@ -180,6 +181,6 @@ export default () => {
         readOnly={isReadOnly}
         aria-label="Use aria labels when no actual label is in use"
       />
-    </Fragment>
+    </>
   );
 };