diff --git a/packages/js/product-editor/changelog/fix-46608 b/packages/js/product-editor/changelog/fix-46608
new file mode 100644
index 00000000000..4c63e41c9b6
--- /dev/null
+++ b/packages/js/product-editor/changelog/fix-46608
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Remove table separator, move field names to table columns and fix the modal growing when there are validation errors
diff --git a/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx b/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx
index 64aabef0523..8c8f11bf468 100644
--- a/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx
+++ b/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx
@@ -188,44 +188,78 @@ export function CreateModal( {
 				props.className
 			) }
 		>
-			<ul className="woocommerce-product-custom-fields__create-modal-list">
-				{ customFields.map( ( customField ) => (
-					<li
-						key={ customField.id }
-						className="woocommerce-product-custom-fields__create-modal-list-item"
-					>
-						<TextControl
-							ref={ getRef( customField, 'key' ) }
-							label={ __( 'Name', 'woocommerce' ) }
-							error={ getValidationError( customField, 'key' ) }
-							value={ customField.key }
-							onChange={ changeHandler( customField, 'key' ) }
-							onBlur={ blurHandler( customField, 'key' ) }
+			<div role="table">
+				<div role="rowgroup">
+					<div role="rowheader">
+						<div role="columnheader">
+							{ __( 'Name', 'woocommerce' ) }
+						</div>
+						<div role="columnheader">
+							{ __( 'Value', 'woocommerce' ) }
+						</div>
+						<div
+							role="columnheader"
+							aria-label={ __( 'Actions', 'woocommerce' ) }
 						/>
-
-						<TextControl
-							ref={ getRef( customField, 'value' ) }
-							label={ __( 'Value', 'woocommerce' ) }
-							error={ getValidationError( customField, 'value' ) }
-							value={ customField.value }
-							onChange={ changeHandler( customField, 'value' ) }
-							onBlur={ blurHandler( customField, 'value' ) }
-						/>
-
-						<Button
-							icon={ closeSmall }
-							disabled={ customFields.length <= 1 }
-							aria-label={ __(
-								'Remove custom field',
-								'woocommerce'
-							) }
-							onClick={ removeCustomFieldButtonClickHandler(
-								customField
-							) }
-						/>
-					</li>
-				) ) }
-			</ul>
+					</div>
+				</div>
+				<div role="rowgroup">
+					{ customFields.map( ( customField ) => (
+						<div key={ customField.id } role="row">
+							<div role="cell">
+								<TextControl
+									ref={ getRef( customField, 'key' ) }
+									label={ '' }
+									aria-label={ __( 'Name', 'woocommerce' ) }
+									error={ getValidationError(
+										customField,
+										'key'
+									) }
+									value={ customField.key }
+									onChange={ changeHandler(
+										customField,
+										'key'
+									) }
+									onBlur={ blurHandler( customField, 'key' ) }
+								/>
+							</div>
+							<div role="cell">
+								<TextControl
+									ref={ getRef( customField, 'value' ) }
+									label={ '' }
+									aria-label={ __( 'Value', 'woocommerce' ) }
+									error={ getValidationError(
+										customField,
+										'value'
+									) }
+									value={ customField.value }
+									onChange={ changeHandler(
+										customField,
+										'value'
+									) }
+									onBlur={ blurHandler(
+										customField,
+										'value'
+									) }
+								/>
+							</div>
+							<div role="cell">
+								<Button
+									icon={ closeSmall }
+									disabled={ customFields.length <= 1 }
+									aria-label={ __(
+										'Remove custom field',
+										'woocommerce'
+									) }
+									onClick={ removeCustomFieldButtonClickHandler(
+										customField
+									) }
+								/>
+							</div>
+						</div>
+					) ) }
+				</div>
+			</div>
 
 			<div className="woocommerce-product-custom-fields__create-modal-add-another">
 				<Button
diff --git a/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss b/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss
index 00ab431ac40..39d02c6c01b 100644
--- a/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss
+++ b/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss
@@ -1,29 +1,53 @@
 .woocommerce-product-custom-fields__create-modal {
 	min-width: 75%;
 
-	&-list {
-		&-item {
-			display: flex;
-			gap: $grid-unit-20;
-			border-bottom: 1px solid $gray-200;
-			padding-top: $grid-unit-30;
-			padding-bottom: $grid-unit;
-			margin-bottom: 0;
+	[role="table"] {
+		width: 100%;
 
-			&:first-child {
-				padding-top: 0;
-			}
+		[role="rowheader"],
+		[role="row"] {
+			display: grid;
+			grid-template-columns: 1fr 1fr 36px;
+			gap: $grid-unit-20;
+		}
+
+		[role="row"] {
+			border-top: 1px solid $gray-200;
+			border-bottom: 1px solid transparent;
+			padding-top: $grid-unit-40;
+		}
+
+		[role="columnheader"] {
+			text-transform: uppercase;
+			color: $gray-700;
+			padding-top: $grid-unit-30;
+			padding-bottom: $grid-unit-20;
+		}
+
+		[role="cell"] {
+			height: $grid-unit-80;
 
 			.components-base-control {
 				width: 100%;
+				margin-bottom: 0;
+
+				.components-input-base {
+					gap: 0;
+				}
 			}
 
-			.components-button {
-				margin-top: 20px;
+			.components-button.has-icon {
+				min-width: $grid-unit-40;
+				width: $grid-unit-40;
+				height: $grid-unit-40;
 			}
 		}
 	}
 
+	&-add-another {
+		margin-top: $grid-unit-40;
+	}
+
 	&-actions {
 		display: flex;
 		align-items: center;