diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index c6dfe3880e70a..db2ad3c3de14f 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -5,7 +5,8 @@ import {
 	Button,
 	ButtonGroup,
 	SelectControl,
-	TextControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -46,12 +47,10 @@ export default function ImageSizeControl( {
 			) }
 			{ isResizable && (
 				<div className="block-editor-image-size-control">
-					<p className="block-editor-image-size-control__row">
-						{ __( 'Image dimensions' ) }
-					</p>
-					<div className="block-editor-image-size-control__row">
-						<TextControl
-							type="number"
+					<p>{ __( 'Image dimensions' ) }</p>
+
+					<HStack align="baseline" spacing="3">
+						<NumberControl
 							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
@@ -60,8 +59,7 @@ export default function ImageSizeControl( {
 								updateDimension( 'width', value )
 							}
 						/>
-						<TextControl
-							type="number"
+						<NumberControl
 							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
@@ -70,8 +68,8 @@ export default function ImageSizeControl( {
 								updateDimension( 'height', value )
 							}
 						/>
-					</div>
-					<div className="block-editor-image-size-control__row">
+					</HStack>
+					<HStack>
 						<ButtonGroup aria-label={ __( 'Image size presets' ) }>
 							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
 								const scaledWidth = Math.round(
@@ -108,7 +106,7 @@ export default function ImageSizeControl( {
 						<Button isSmall onClick={ () => updateDimensions() }>
 							{ __( 'Reset' ) }
 						</Button>
-					</div>
+					</HStack>
 				</div>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/image-size-control/style.scss b/packages/block-editor/src/components/image-size-control/style.scss
index 2a0bf9fa6c351..d01bfc5929fbe 100644
--- a/packages/block-editor/src/components/image-size-control/style.scss
+++ b/packages/block-editor/src/components/image-size-control/style.scss
@@ -1,26 +1,8 @@
 .block-editor-image-size-control {
 	margin-bottom: 1em;
 
-	.block-editor-image-size-control__row {
-		display: flex;
-		justify-content: space-between;
-
-		.block-editor-image-size-control__width,
-		.block-editor-image-size-control__height {
-			margin-bottom: 0.5em;
-
-			// Fix the text and placeholder text being misaligned in Safari
-			input {
-				line-height: 1.25;
-			}
-		}
-
-		.block-editor-image-size-control__width {
-			margin-right: 5px;
-		}
-
-		.block-editor-image-size-control__height {
-			margin-left: 5px;
-		}
+	.block-editor-image-size-control__width,
+	.block-editor-image-size-control__height {
+		margin-bottom: 1.115em;
 	}
 }
diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js
index 8d7d0df8d64b6..f226de5a47366 100644
--- a/packages/editor/src/components/page-attributes/order.js
+++ b/packages/editor/src/components/page-attributes/order.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
@@ -25,17 +29,19 @@ export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
 	};
 	const value = orderInput === null ? order : orderInput;
 	return (
-		<TextControl
-			className="editor-page-attributes__order"
-			type="number"
-			label={ __( 'Order' ) }
-			value={ value }
-			onChange={ setUpdatedOrder }
-			size={ 6 }
-			onBlur={ () => {
-				setOrderInput( null );
-			} }
-		/>
+		<Flex>
+			<FlexBlock>
+				<NumberControl
+					label={ __( 'Order' ) }
+					value={ value }
+					onChange={ setUpdatedOrder }
+					labelPosition="side"
+					onBlur={ () => {
+						setOrderInput( null );
+					} }
+				/>
+			</FlexBlock>
+		</Flex>
 	);
 };
 
diff --git a/packages/editor/src/components/page-attributes/style.scss b/packages/editor/src/components/page-attributes/style.scss
deleted file mode 100644
index a815db2d83227..0000000000000
--- a/packages/editor/src/components/page-attributes/style.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.editor-page-attributes__order {
-	width: 100%;
-	.components-base-control__field {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	input {
-		width: 66px;
-	}
-}
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 18fd8fef3bf12..9d035ec4d654a 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -3,7 +3,6 @@
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
-@import "./components/page-attributes/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index cbf1884cba1af..9fae7038bf47c 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG, TextControl, Popover, Button } from '@wordpress/components';
+import {
+	Path,
+	SVG,
+	Popover,
+	Button,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { insertObject, useAnchor } from '@wordpress/rich-text';
@@ -70,19 +77,21 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 					event.preventDefault();
 				} }
 			>
-				<TextControl
-					className="block-editor-format-toolbar__image-container-value"
-					type="number"
-					label={ __( 'Width' ) }
-					value={ width }
-					min={ 1 }
-					onChange={ ( newWidth ) => setWidth( newWidth ) }
-				/>
-				<Button
-					icon={ keyboardReturn }
-					label={ __( 'Apply' ) }
-					type="submit"
-				/>
+				<HStack alignment="bottom" spacing="0">
+					<NumberControl
+						className="block-editor-format-toolbar__image-container-value"
+						label={ __( 'Width' ) }
+						value={ width }
+						min={ 1 }
+						onChange={ ( newWidth ) => setWidth( newWidth ) }
+					/>
+					<Button
+						className="block-editor-format-toolbar__image-container-button"
+						icon={ keyboardReturn }
+						label={ __( 'Apply' ) }
+						type="submit"
+					/>
+				</HStack>
 			</form>
 		</Popover>
 	);
diff --git a/packages/format-library/src/image/style.scss b/packages/format-library/src/image/style.scss
index 7b7b4f7810987..639d1ccc5961e 100644
--- a/packages/format-library/src/image/style.scss
+++ b/packages/format-library/src/image/style.scss
@@ -1,34 +1,15 @@
 .block-editor-format-toolbar__image-popover {
 	z-index: z-index(".block-editor-format-toolbar__image-popover");
-}
 
-.block-editor-format-toolbar__image-container-content {
-	display: flex;
+	.block-editor-format-toolbar__image-container-value {
+		margin: $grid-unit-10 - $border-width;
+		min-width: 150px;
+		max-width: 500px;
+	}
 
-	.components-button {
-		align-self: flex-end;
+	.block-editor-format-toolbar__image-container-button {
 		height: $grid-unit-10 * 4 - ($border-width * 2);
 		margin-bottom: $grid-unit-10;
 		margin-right: $grid-unit-10;
-		padding: 0 6px;
-	}
-}
-
-.block-editor-format-toolbar__image-container-value {
-	margin: $grid-unit-10 - $border-width;
-	flex-grow: 1;
-	flex-shrink: 1;
-	white-space: nowrap;
-	min-width: 150px;
-	max-width: 500px;
-
-	&.components-base-control {
-		.components-base-control__field {
-			margin-bottom: 0;
-		}
-
-		.components-base-control__label {
-			display: block;
-		}
 	}
 }