diff --git a/assets/js/blocks/attribute-filter/block.js b/assets/js/blocks/attribute-filter/block.js
index 86084a54cce..296a6def1c9 100644
--- a/assets/js/blocks/attribute-filter/block.js
+++ b/assets/js/blocks/attribute-filter/block.js
@@ -331,7 +331,9 @@ const AttributeFilterBlock = ( {
 					{ blockAttributes.heading }
 				</TagName>
 			) }
-			<div className="wc-block-attribute-filter">
+			<div
+				className={ `wc-block-attribute-filter style-${ blockAttributes.displayStyle }` }
+			>
 				{ blockAttributes.displayStyle === 'dropdown' ? (
 					<DropdownSelector
 						attributeLabel={ attributeObject.label }
diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
index aab0995e404..10eb4396a2b 100644
--- a/assets/js/blocks/attribute-filter/style.scss
+++ b/assets/js/blocks/attribute-filter/style.scss
@@ -1,8 +1,14 @@
 .wc-block-attribute-filter {
 	margin-bottom: $gap-large;
 
+	&.style-dropdown {
+		display: flex;
+		gap: $gap;
+	}
+
 	.wc-block-attribute-filter-list {
 		margin: 0;
+		width: 100%;
 
 		li {
 			text-decoration: underline;
@@ -18,12 +24,18 @@
 		}
 	}
 
+	.wc-block-attribute-filter-dropdown {
+		flex-grow: 1;
+		max-width: unset;
+		width: 0;
+	}
+
 	.is-single .wc-block-attribute-filter-list-count,
 	.wc-block-dropdown-selector .wc-block-dropdown-selector__list .wc-block-attribute-filter-list-count {
 		opacity: 0.6;
 	}
 
-	.wc-block-attribute-filter__button {
-		margin-top: $gap-smaller;
+	.wc-block-components-dropdown-selector__input-wrapper {
+		height: 100%;
 	}
 }