💄 Improve the (broken) UI in the Styling-tab

modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js

@@ -0,0 +1,26 @@
+/**
+ * Temporary component, until the experimental HStack block editor component is stable.
+ *
+ * @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
+ * @file
+ */
+import classNames from 'classnames';
+
+const HStack = ( { className, spacing = 3, children } ) => {
+	const wrapperClass = classNames(
+		'components-flex components-h-stack',
+		className
+	);
+
+	const styles = {
+		gap: `calc(${ 4 * spacing }px)`,
+	};
+
+	return (
+		<div className={ wrapperClass } style={ styles }>
+			{ children }
+		</div>
+	);
+};
+
+export default HStack;