diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
index 821f27b309d70b..8a3d3eef08145e 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -1,10 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-
 import { Fragment } from '@wordpress/element';
-
 import { ToggleControl } from '@wordpress/components';
 
 /**
@@ -93,23 +96,20 @@ function ResponsiveBlockControl( props ) {
 					onChange={ onIsResponsiveChange }
 					help={ toggleHelpText }
 				/>
-
-				{ ! isResponsive && (
-					<div className="block-editor-responsive-block-control__group">
-						{ defaultControl }
-					</div>
-				) }
-
-				{ isResponsive && (
-					<div
-						className="block-editor-responsive-block-control__group is-responsive"
-						hidden={ ! isResponsive }
-					>
-						{ renderResponsiveControls
+				<div
+					className={ classnames(
+						'block-editor-responsive-block-control__group',
+						{
+							'is-responsive': isResponsive,
+						}
+					) }
+				>
+					{ ! isResponsive && defaultControl }
+					{ isResponsive &&
+						( renderResponsiveControls
 							? renderResponsiveControls( viewports )
-							: defaultResponsiveControls() }
-					</div>
-				) }
+							: defaultResponsiveControls() ) }
+				</div>
 			</div>
 		</fieldset>
 	);