diff --git a/src-docs/src/views/badge/beta_badge.tsx b/src-docs/src/views/badge/beta_badge.tsx
index ea2fcdf2683..8f0c6213dec 100644
--- a/src-docs/src/views/badge/beta_badge.tsx
+++ b/src-docs/src/views/badge/beta_badge.tsx
@@ -7,31 +7,34 @@ const colors = ['hollow', 'accent', 'subdued'] as const;
 
 export default () => (
   <>
-    {colors.map((item, index) => (
-      <div key={index}>
-        <EuiBetaBadge
-          label="Beta"
-          color={item}
-          tooltipContent="This module is not GA. Please help us by reporting any bugs."
-        />
-        &emsp;
-        <EuiBetaBadge
-          label="Beta"
-          color={item}
-          size="s"
-          tooltipContent="This module is not GA. Please help us by reporting any bugs."
-        />
-        &emsp;
-        <EuiBetaBadge label="Beta" color={item} iconType="beta" />
-        &emsp;
-        <EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
-        &emsp;
-        <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
-        &emsp;
-        <EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
-        <EuiSpacer size="s" />
-      </div>
-    ))}
+    <div
+      css={css`
+        display: grid;
+        align-items: flex-start;
+        grid: repeat(3, max-content) / repeat(6, max-content);
+        gap: 0.75rem;
+      `}
+    >
+      {colors.map((item) => (
+        <>
+          <EuiBetaBadge
+            label="Beta"
+            color={item}
+            tooltipContent="This module is not GA. Please help us by reporting any bugs."
+          />
+          <EuiBetaBadge
+            label="Beta"
+            color={item}
+            size="s"
+            tooltipContent="This module is not GA. Please help us by reporting any bugs."
+          />
+          <EuiBetaBadge label="Beta" color={item} iconType="beta" />
+          <EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
+          <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
+          <EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
+        </>
+      ))}
+    </div>
     <EuiSpacer size="s" />
     <EuiTitle size="s">
       <h3>
@@ -51,7 +54,7 @@ export default () => (
       css={css`
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.75rem;
       `}
     >
       <EuiBetaBadge