diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js
index 94d8ef96baf943..dc8f82f471ac92 100644
--- a/packages/components/src/custom-select-control/stories/index.js
+++ b/packages/components/src/custom-select-control/stories/index.js
@@ -8,7 +8,7 @@ export default {
 	component: CustomSelectControl,
 };
 
-const options = [
+const defaultOptions = [
 	{
 		key: 'small',
 		name: 'Small',
@@ -31,5 +31,28 @@ const options = [
 	},
 ];
 export const _default = () => (
-	<CustomSelectControl label="Font size" options={ options } />
+	<CustomSelectControl label="Font size" options={ defaultOptions } />
+);
+
+const longLabelOptions = [
+	{
+		key: 'reallylonglabel1',
+		name: 'Really long labels are good for stress testing',
+	},
+	{
+		key: 'reallylonglabel2',
+		name: 'But they can take a long time to type.',
+	},
+	{
+		key: 'reallylonglabel3',
+		name:
+			'That really is ok though because you should stress test your UIs.',
+	},
+];
+
+export const longLabels = () => (
+	<CustomSelectControl
+		label="Testing long labels"
+		options={ longLabelOptions }
+	/>
 );
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index c54c5f94c94320..ad528085052f3e 100644
--- a/packages/components/src/custom-select-control/style.scss
+++ b/packages/components/src/custom-select-control/style.scss
@@ -16,6 +16,12 @@
 	position: relative;
 	text-align: left;
 
+	// For all button sizes allow sufficient space for the
+	// dropdown "arrow" icon to display.
+	&.components-custom-select-control__button {
+		padding-right: $icon-size;
+	}
+
 	&:focus:not(:disabled) {
 		border-color: $theme-color;
 		box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;