diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
index 81f2689ad14..808a583734d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
@@ -18,11 +18,11 @@
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
+			gap: 0 calc(#{$gap-smaller} * 2); // Required for spacing especially when using flex-grow
 
 			.wc-block-components-text-input,
-			.wc-block-components-country-input,
 			.wc-block-components-state-input {
-				flex: 0 0 calc(50% - #{$gap-smaller});
+				flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space
 				box-sizing: border-box;
 
 				&:nth-of-type(2),
@@ -33,7 +33,8 @@
 
 			.wc-block-components-address-form__company,
 			.wc-block-components-address-form__address_1,
-			.wc-block-components-address-form__address_2 {
+			.wc-block-components-address-form__address_2,
+			.wc-block-components-country-input {
 				flex: 0 0 100%;
 			}
 		}