diff --git a/changelogs/fragments/8045.yml b/changelogs/fragments/8045.yml
new file mode 100644
index 000000000000..da2a823b6367
--- /dev/null
+++ b/changelogs/fragments/8045.yml
@@ -0,0 +1,2 @@
+fix:
+- Order of query editor extensions not working ([#8045](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8045))
\ No newline at end of file
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index 770160de8c1d..a7f4db7f0ea9 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -150,6 +150,15 @@
   }
 }
 
+.osdQueryEditor__header {
+  display: flex;
+  align-items: center;
+
+  .osdQueryEditorExtensionComponent {
+    padding: 0 $euiSizeXS $euiSizeXS;
+  }
+}
+
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
index 45b0d076877e..89e9f5e3c94f 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
@@ -26,15 +26,21 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
 
   return (
     <>
-      {sortedConfigs.map((config) => (
-        <QueryEditorExtension
-          key={config.id}
-          config={config}
-          dependencies={dependencies}
-          componentContainer={componentContainer}
-          bannerContainer={bannerContainer}
-        />
-      ))}
+      {sortedConfigs.map((config) => {
+        const extensionComponentContainer = document.createElement('div');
+        extensionComponentContainer.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
+        componentContainer.appendChild(extensionComponentContainer);
+
+        return (
+          <QueryEditorExtension
+            key={config.id}
+            config={config}
+            dependencies={dependencies}
+            componentContainer={extensionComponentContainer}
+            bannerContainer={bannerContainer}
+          />
+        );
+      })}
     </>
   );
 });
diff --git a/src/plugins/query_enhancements/public/query_assist/_index.scss b/src/plugins/query_enhancements/public/query_assist/_index.scss
index f80ad45850c9..65ed6aa60884 100644
--- a/src/plugins/query_enhancements/public/query_assist/_index.scss
+++ b/src/plugins/query_enhancements/public/query_assist/_index.scss
@@ -4,11 +4,11 @@
  */
 
 .queryAssist {
-  &.queryAssist__form {
-    padding: 0 $euiSizeXS $euiSizeXS;
-  }
-
   &.queryAssist__callout {
     margin-top: $euiSizeXS;
   }
 }
+
+.osdQueryEditorExtensionComponent__query-assist {
+  flex-grow: 1;
+}