Fix the Layout for Shipping and Billing Address Forms in the Checkout…

… Block (#11486)

* Fix empty spaces in the address form

* Fix checkout layout for Japan and Hungary

* Added some comments in CSS

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%;
 			}
 		}