diff --git a/components/base-control/index.js b/components/base-control/index.js
index bb9ba1feca17cc..695293cec35eba 100644
--- a/components/base-control/index.js
+++ b/components/base-control/index.js
@@ -11,8 +11,10 @@ import './style.scss';
 function BaseControl( { id, label, help, className, children } ) {
 	return (
 		<div className={ classnames( 'components-base-control', className ) }>
-			{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
-			{ children }
+			<div className="components-base-control__field">
+				{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
+				{ children }
+			</div>
 			{ !! help && <p id={ id + '__help' } className="components-base-control__help">{ help }</p> }
 		</div>
 	);
diff --git a/components/range-control/style.scss b/components/range-control/style.scss
index fc3e710d277e19..4592bfbe2b33b2 100644
--- a/components/range-control/style.scss
+++ b/components/range-control/style.scss
@@ -1,8 +1,11 @@
+
 .components-range-control {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	align-items: center;
+	.components-base-control__field {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		align-items: center;
+	}
 
 	.dashicon {
 		flex-shrink: 0;
diff --git a/components/toggle-control/style.scss b/components/toggle-control/style.scss
index 3bc93322a8f054..b425b7b5713920 100644
--- a/components/toggle-control/style.scss
+++ b/components/toggle-control/style.scss
@@ -1,4 +1,4 @@
-.components-toggle-control {
+.components-toggle-control .components-base-control__field {
 	display: flex;
 	justify-content: space-between;
-}
\ No newline at end of file
+}