diff --git a/packages/block-editor/src/components/inspector-controls/bindings-panel.js b/packages/block-editor/src/components/block-bindings-panel/index.js
similarity index 80%
rename from packages/block-editor/src/components/inspector-controls/bindings-panel.js
rename to packages/block-editor/src/components/block-bindings-panel/index.js
index 789307939c4ea8..d9e446153d00aa 100644
--- a/packages/block-editor/src/components/inspector-controls/bindings-panel.js
+++ b/packages/block-editor/src/components/block-bindings-panel/index.js
@@ -23,15 +23,18 @@ export const BindingsPanel = ( { block } ) => {
 	);
 
 	return (
-		<PanelBody title={ __( 'Bindings' ) }>
+		<PanelBody
+			title={ __( 'Bindings' ) }
+			className="components-panel__block-bindings-panel"
+		>
 			<ItemGroup isBordered isSeparated size="large">
 				{ Object.keys( bindings ).map( ( key, index ) => {
 					return (
 						<Item key={ index }>
-							<div>
-								{ key } :{ ' ' }
+							<span>{ key }</span>
+							<span className="components-item__block-bindings-source">
 								{ sources[ bindings[ key ].source ].label }
-							</div>
+							</span>
 						</Item>
 					);
 				} ) }
diff --git a/packages/block-editor/src/components/block-bindings-panel/style.scss b/packages/block-editor/src/components/block-bindings-panel/style.scss
new file mode 100644
index 00000000000000..0adaf2c20f9abe
--- /dev/null
+++ b/packages/block-editor/src/components/block-bindings-panel/style.scss
@@ -0,0 +1,12 @@
+.components-panel__block-bindings-panel {
+
+	.components-item {
+		display: flex;
+		justify-content: space-between;
+
+		.components-item__block-bindings-source {
+			color: $gray-700;
+		}
+	}
+
+}
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 073fccc4496e7f..c843b58737d1e8 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -31,7 +31,7 @@ import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
 
 import { unlock } from '../../lock-unlock';
-import { BindingsPanel } from '../inspector-controls/bindings-panel';
+import { BindingsPanel } from '../block-bindings-panel';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
index 9fb56ecbebc4b0..1303edfb6bb133 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
@@ -5,7 +5,7 @@ import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 import SettingsTabHint from './settings-tab-hint';
-import { BindingsPanel } from '../inspector-controls/bindings-panel';
+import { BindingsPanel } from '../block-bindings-panel';
 
 function SettingsTab( { showAdvancedControls = false, block } ) {
 	const hasBindings = block?.attributes?.metadata?.bindings
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 5080aa05718bb3..b372bde64dea26 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-bindings-panel/style.scss";
 @import "./components/block-bindings-toolbar-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";