diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
index 8ec6cacf0..8bf0ce79f 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
@@ -160,12 +160,10 @@
 	}
 }
 
-.ppcp-r-settings-block__button {
-	display: flex;
+.ppcp--horizontal {
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	gap: 50px;
 }
 
 .ppcp-r-settings-block__accordion {
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index 42bc832ed..812ae0d3d 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -1,14 +1,16 @@
 import { Button } from '@wordpress/components';
 
 import SettingsBlock from '../SettingsBlock';
-import { Action, Description, Header, Title } from '../Elements';
+import { Action } from '../Elements';
 
 const ButtonSettingsBlock = ( { title, description, ...props } ) => (
-	<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
-		<Header>
-			<Title>{ title }</Title>
-			<Description>{ description }</Description>
-		</Header>
+	<SettingsBlock
+		title={ title }
+		headerDescription={ description }
+		horizontalLayout={ true }
+		className="ppcp-r-settings-block__button"
+		{ ...props }
+	>
 		<Action>
 			<Button
 				isBusy={ props.actionProps?.isBusy }