diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts
index e1856663ca5e..496b224c0d31 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/index.ts
@@ -1,5 +1,6 @@
 export { default as getTextDimension } from './getTextDimension';
 export { default as computeMaxFontSize } from './computeMaxFontSize';
 export { default as mergeMargin } from './mergeMargin';
+export { default as parseLength } from './parseLength';
 
 export * from './types';
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/parseLength.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/parseLength.ts
new file mode 100644
index 000000000000..07057d077acd
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/src/parseLength.ts
@@ -0,0 +1,15 @@
+const HUNDRED_PERCENT = { isDynamic: true, multiplier: 1 } as const;
+
+export default function parseLength(
+  input: string | number,
+): { isDynamic: true; multiplier: number } | { isDynamic: false; value: number } {
+  if (input === 'auto' || input === '100%') {
+    return HUNDRED_PERCENT;
+  } else if (typeof input === 'string' && input.length > 0 && input[input.length - 1] === '%') {
+    // eslint-disable-next-line no-magic-numbers
+    return { isDynamic: true, multiplier: parseFloat(input) / 100 };
+  }
+  const value = typeof input === 'number' ? input : parseFloat(input);
+
+  return { isDynamic: false, value };
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/test/parseLength.test.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/test/parseLength.test.ts
new file mode 100644
index 000000000000..e4f13d7140f5
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-dimension/test/parseLength.test.ts
@@ -0,0 +1,29 @@
+import parseLength from '../src/parseLength';
+
+describe('parseLength(input)', () => {
+  it('handles string "auto"', () => {
+    expect(parseLength('auto')).toEqual({ isDynamic: true, multiplier: 1 });
+  });
+
+  it('handles strings with % at the end', () => {
+    expect(parseLength('100%')).toEqual({ isDynamic: true, multiplier: 1 });
+    expect(parseLength('50%')).toEqual({ isDynamic: true, multiplier: 0.5 });
+    expect(parseLength('0%')).toEqual({ isDynamic: true, multiplier: 0 });
+  });
+
+  it('handles strings that are numbers with px at the end', () => {
+    expect(parseLength('100px')).toEqual({ isDynamic: false, value: 100 });
+    expect(parseLength('20.5px')).toEqual({ isDynamic: false, value: 20.5 });
+  });
+
+  it('handles strings that are numbers', () => {
+    expect(parseLength('100')).toEqual({ isDynamic: false, value: 100 });
+    expect(parseLength('40.5')).toEqual({ isDynamic: false, value: 40.5 });
+    expect(parseLength('20.0')).toEqual({ isDynamic: false, value: 20 });
+  });
+
+  it('handles numbers', () => {
+    expect(parseLength(100)).toEqual({ isDynamic: false, value: 100 });
+    expect(parseLength(0)).toEqual({ isDynamic: false, value: 0 });
+  });
+});