diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 246c0133fbb4..9b46f4ac2a07 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -35,8 +35,15 @@ const SwatchLabel = styled.div(({ theme }) => ({
       ? transparentize(0.4, theme.color.defaultText)
       : transparentize(0.6, theme.color.defaultText),
 
-  small: {
+  '> div': {
+    display: 'inline-block',
+    overflow: 'hidden',
+    maxWidth: '100%',
+  },
+
+  span: {
     display: 'block',
+    marginTop: 2,
   },
 }));
 
@@ -128,8 +135,10 @@ function renderSwatch(color: string) {
 function renderSwatchLabel(color: string, colorDescription?: string) {
   return (
     <SwatchLabel key={color} title={color}>
-      {color}
-      {colorDescription && <small>{colorDescription}</small>}
+      <div>
+        {color}
+        {colorDescription && <span>{colorDescription}</span>}
+      </div>
     </SwatchLabel>
   );
 }