diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 3eedd1f629a633..0ce3bc0577640f 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -1,23 +1,13 @@
-.block-editor-hooks__layout-controls-units {
-	display: flex;
-	flex-direction: column;
-	gap: $grid-unit-20;
-}
-
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
-	margin-bottom: 0;
-}
-
-.block-editor-hooks__layout-controls-reset {
-	display: flex;
-	justify-content: flex-end;
-	margin-bottom: $grid-unit-30;
+.block-editor-hooks__layout-constrained {
+	.components-base-control {
+		margin-bottom: 0; // Cancel out margins added by block inspector
+	}
 }
 
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
 	color: $gray-700;
 	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0; // Cancel out margins added by common.css
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 21aca422a315ff..7bf6badf008709 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -7,6 +7,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -70,12 +71,14 @@ export default {
 			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
-			<>
+			<VStack
+				spacing={ 4 }
+				className="block-editor-hooks__layout-constrained"
+			>
 				{ allowCustomContentAndWideSize && (
-					<div className="block-editor-hooks__layout-controls-units">
+					<>
 						<UnitControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Content width' ) }
 							labelPosition="top"
 							value={ contentSize || wideSize || '' }
@@ -98,7 +101,6 @@ export default {
 						/>
 						<UnitControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__layout-controls-unit-input"
 							label={ __( 'Wide width' ) }
 							labelPosition="top"
 							value={ wideSize || contentSize || '' }
@@ -119,12 +121,12 @@ export default {
 								</InputControlPrefixWrapper>
 							}
 						/>
-						<p className="block-editor-hooks__layout-controls-helptext">
+						<p className="block-editor-hooks__layout-constrained-helptext">
 							{ __(
 								'Customize the width for all elements that are assigned to the center or wide columns.'
 							) }
 						</p>
-					</div>
+					</>
 				) }
 				{ allowJustification && (
 					<ToggleGroupControl
@@ -148,7 +150,7 @@ export default {
 						) }
 					</ToggleGroupControl>
 				) }
-			</>
+			</VStack>
 		);
 	},
 	toolBarControls: function DefaultLayoutToolbarControls( {