diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
index f200e25453a2a..bd2789cf645c7 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
@@ -13,17 +13,7 @@
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
 }
 
-.lnsDimensionContainer--noAnimation {
-  animation: none;
-}
-
 .lnsDimensionContainer__footer,
 .lnsDimensionContainer__header {
   padding: $euiSizeS;
 }
-
-.lnsDimensionContainer__trigger {
-  width: 100%;
-  display: block;
-  word-break: break-word;
-}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
index 19f4c0428260e..8f1b441d1d285 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -16,89 +16,42 @@ import {
   EuiOutsideClickDetector,
 } from '@elastic/eui';
 
-import classNames from 'classnames';
 import { i18n } from '@kbn/i18n';
-import { VisualizationDimensionGroupConfig } from '../../../types';
-import { DimensionContainerState } from './types';
 
 export function DimensionContainer({
-  dimensionContainerState,
-  setDimensionContainerState,
-  groups,
-  accessor,
-  groupId,
-  trigger,
+  isOpen,
+  groupLabel,
+  handleClose,
   panel,
-  panelTitle,
 }: {
-  dimensionContainerState: DimensionContainerState;
-  setDimensionContainerState: (newState: DimensionContainerState) => void;
-  groups: VisualizationDimensionGroupConfig[];
-  accessor: string;
-  groupId: string;
-  trigger: React.ReactElement;
+  isOpen: boolean;
+  handleClose: () => void;
   panel: React.ReactElement;
-  panelTitle: React.ReactNode;
+  groupLabel: string;
 }) {
-  const [openByCreation, setIsOpenByCreation] = useState(
-    dimensionContainerState.openId === accessor
-  );
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
-  const [flyoutIsVisible, setFlyoutIsVisible] = useState(false);
-
-  const noMatch = dimensionContainerState.isOpen
-    ? !groups.some((d) => d.accessors.includes(accessor))
-    : false;
 
   const closeFlyout = () => {
-    setDimensionContainerState({
-      isOpen: false,
-      openId: null,
-      addingToGroupId: null,
-    });
-    setIsOpenByCreation(false);
+    handleClose();
     setFocusTrapIsEnabled(false);
-    setFlyoutIsVisible(false);
-  };
-
-  const openFlyout = () => {
-    setFlyoutIsVisible(true);
-    setTimeout(() => {
-      setFocusTrapIsEnabled(true);
-    }, 255);
   };
 
-  const flyoutShouldBeOpen =
-    dimensionContainerState.isOpen &&
-    (dimensionContainerState.openId === accessor ||
-      (noMatch && dimensionContainerState.addingToGroupId === groupId));
-
   useEffect(() => {
-    if (flyoutShouldBeOpen) {
-      openFlyout();
+    if (isOpen) {
+      // without setTimeout here the flyout pushes content when animating
+      setTimeout(() => {
+        setFocusTrapIsEnabled(true);
+      }, 255);
     }
-  });
+  }, [isOpen]);
 
-  useEffect(() => {
-    if (!flyoutShouldBeOpen) {
-      if (flyoutIsVisible) {
-        setFlyoutIsVisible(false);
-      }
-      if (focusTrapIsEnabled) {
-        setFocusTrapIsEnabled(false);
-      }
-    }
-  }, [flyoutShouldBeOpen, flyoutIsVisible, focusTrapIsEnabled]);
-
-  const flyout = flyoutIsVisible && (
+  return isOpen ? (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
-      <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!flyoutIsVisible}>
+      <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
         <div
           role="dialog"
           aria-labelledby="lnsDimensionContainerTitle"
-          className={classNames('lnsDimensionContainer', {
-            'lnsDimensionContainer--noAnimation': openByCreation,
-          })}
+          className="lnsDimensionContainer"
         >
           <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
             <EuiTitle size="xs">
@@ -109,7 +62,14 @@ export function DimensionContainer({
                 iconType="sortLeft"
                 flush="left"
               >
-                <strong>{panelTitle}</strong>
+                <strong>
+                  {i18n.translate('xpack.lens.configure.configurePanelTitle', {
+                    defaultMessage: '{groupLabel} configuration',
+                    values: {
+                      groupLabel,
+                    },
+                  })}
+                </strong>
               </EuiButtonEmpty>
             </EuiTitle>
           </EuiFlyoutHeader>
@@ -126,12 +86,5 @@ export function DimensionContainer({
         </div>
       </EuiOutsideClickDetector>
     </EuiFocusTrap>
-  );
-
-  return (
-    <>
-      {trigger}
-      {flyout}
-    </>
-  );
+  ) : null;
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
index a9e2d6dc696ab..44dc22d20a4fe 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -14,7 +14,6 @@ import {
 } from '../../mocks';
 import { ChildDragDropProvider } from '../../../drag_drop';
 import { EuiFormRow } from '@elastic/eui';
-import { mount } from 'enzyme';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { Visualization } from '../../../types';
 import { LayerPanel } from './layer_panel';
@@ -211,7 +210,7 @@ describe('LayerPanel', () => {
             groupId: 'a',
             accessors: ['newid'],
             filterOperations: () => true,
-            supportsMoreColumns: false,
+            supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',
             enableDimensionEditor: true,
           },
@@ -220,11 +219,14 @@ describe('LayerPanel', () => {
       mockVisualization.renderDimensionEditor = jest.fn();
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
+      act(() => {
+        component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
+      });
+      component.update();
 
-      const group = component.find('DimensionContainer');
-      const panel = mount(group.prop('panel'));
-
-      expect(panel.children()).toHaveLength(2);
+      const group = component.find('DimensionContainer').first();
+      const panel: React.ReactElement = group.prop('panel');
+      expect(panel.props.children).toHaveLength(2);
     });
 
     it('should keep the DimensionContainer open when configuring a new dimension', () => {
@@ -263,11 +265,8 @@ describe('LayerPanel', () => {
       });
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
-
-      const group = component.find('DimensionContainer');
-      const triggerButton = mountWithIntl(group.prop('trigger'));
       act(() => {
-        triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
+        component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
       });
       component.update();
 
@@ -312,10 +311,8 @@ describe('LayerPanel', () => {
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
 
-      const group = component.find('DimensionContainer');
-      const triggerButton = mountWithIntl(group.prop('trigger'));
       act(() => {
-        triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
+        component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
       });
       component.update();
       expect(component.find('EuiFlyoutHeader').exists()).toBe(true);
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index ce2955da890d7..e72bf75b010c3 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -23,13 +23,11 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop
 import { LayerSettings } from './layer_settings';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
-import { ConfigPanelWrapperProps, DimensionContainerState } from './types';
+import { ConfigPanelWrapperProps, ActiveDimensionState } from './types';
 import { DimensionContainer } from './dimension_container';
 
-const initialDimensionContainerState = {
-  isOpen: false,
-  openId: null,
-  addingToGroupId: null,
+const initialActiveDimensionState = {
+  isNew: false,
 };
 
 function isConfiguration(
@@ -70,15 +68,15 @@ export function LayerPanel(
   }
 ) {
   const dragDropContext = useContext(DragContext);
-  const [dimensionContainerState, setDimensionContainerState] = useState<DimensionContainerState>(
-    initialDimensionContainerState
+  const [activeDimension, setActiveDimension] = useState<ActiveDimensionState>(
+    initialActiveDimensionState
   );
 
   const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props;
   const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId];
 
   useEffect(() => {
-    setDimensionContainerState(initialDimensionContainerState);
+    setActiveDimension(initialActiveDimensionState);
   }, [props.activeVisualizationId]);
 
   if (
@@ -117,7 +115,7 @@ export function LayerPanel(
 
   const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps);
   const isEmptyLayer = !groups.some((d) => d.accessors.length > 0);
-
+  const { activeId, activeGroup } = activeDimension;
   return (
     <ChildDragDropProvider {...dragDropContext}>
       <EuiPanel data-test-subj={dataTestSubj} className="lnsLayerPanel" paddingSize="s">
@@ -196,31 +194,6 @@ export function LayerPanel(
             >
               <>
                 {group.accessors.map((accessor) => {
-                  const datasourceDimensionEditor = (
-                    <NativeRenderer
-                      render={props.datasourceMap[datasourceId].renderDimensionEditor}
-                      nativeProps={{
-                        ...layerDatasourceConfigProps,
-                        core: props.core,
-                        columnId: accessor,
-                        filterOperations: group.filterOperations,
-                      }}
-                    />
-                  );
-                  const visDimensionEditor =
-                    activeVisualization.renderDimensionEditor && group.enableDimensionEditor ? (
-                      <div key={accessor} className="lnsLayerPanel__styleEditor">
-                        <NativeRenderer
-                          render={activeVisualization.renderDimensionEditor}
-                          nativeProps={{
-                            ...layerVisualizationConfigProps,
-                            groupId: group.groupId,
-                            accessor,
-                            setState: props.updateVisualization,
-                          }}
-                        />
-                      </div>
-                    ) : null;
                   return (
                     <DragDrop
                       key={accessor}
@@ -237,7 +210,7 @@ export function LayerPanel(
                           : 'add'
                       }
                       data-test-subj={group.dataTestSubj}
-                      draggable={!dimensionContainerState.isOpen}
+                      draggable={!activeId}
                       value={{ columnId: accessor, groupId: group.groupId, layerId }}
                       isValueEqual={isSameConfiguration}
                       label={group.groupLabel}
@@ -273,48 +246,26 @@ export function LayerPanel(
                       }}
                     >
                       <div className="lnsLayerPanel__dimension">
-                        <DimensionContainer
-                          dimensionContainerState={dimensionContainerState}
-                          setDimensionContainerState={setDimensionContainerState}
-                          groups={groups}
-                          accessor={accessor}
-                          groupId={group.groupId}
-                          trigger={
-                            <NativeRenderer
-                              render={props.datasourceMap[datasourceId].renderDimensionTrigger}
-                              nativeProps={{
-                                ...layerDatasourceConfigProps,
-                                columnId: accessor,
-                                filterOperations: group.filterOperations,
-                                suggestedPriority: group.suggestedPriority,
-                                onClick: () => {
-                                  if (dimensionContainerState.isOpen) {
-                                    setDimensionContainerState(initialDimensionContainerState);
-                                  } else {
-                                    setDimensionContainerState({
-                                      isOpen: true,
-                                      openId: accessor,
-                                      addingToGroupId: null, // not set for existing dimension
-                                    });
-                                  }
-                                },
-                              }}
-                            />
-                          }
-                          panel={
-                            <>
-                              {datasourceDimensionEditor}
-                              {visDimensionEditor}
-                            </>
-                          }
-                          panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
-                            defaultMessage: '{groupLabel} configuration',
-                            values: {
-                              groupLabel: group.groupLabel,
+                        <NativeRenderer
+                          render={props.datasourceMap[datasourceId].renderDimensionTrigger}
+                          nativeProps={{
+                            ...layerDatasourceConfigProps,
+                            columnId: accessor,
+                            filterOperations: group.filterOperations,
+                            suggestedPriority: group.suggestedPriority,
+                            onClick: () => {
+                              if (activeId) {
+                                setActiveDimension(initialActiveDimensionState);
+                              } else {
+                                setActiveDimension({
+                                  isNew: false,
+                                  activeGroup: group,
+                                  activeId: accessor,
+                                });
+                              }
                             },
-                          })}
+                          }}
                         />
-
                         <EuiButtonIcon
                           data-test-subj="indexPattern-dimension-remove"
                           iconType="cross"
@@ -394,77 +345,32 @@ export function LayerPanel(
                     }}
                   >
                     <div className="lnsLayerPanel__dimension">
-                      <DimensionContainer
-                        dimensionContainerState={dimensionContainerState}
-                        setDimensionContainerState={setDimensionContainerState}
-                        groups={groups}
-                        accessor={newId}
-                        groupId={group.groupId}
-                        trigger={
-                          <EuiButtonEmpty
-                            className="lnsLayerPanel__triggerLink"
-                            color="text"
-                            size="xs"
-                            iconType="plusInCircleFilled"
-                            contentProps={{
-                              className: 'lnsLayerPanel__triggerLinkContent',
-                            }}
-                            data-test-subj="lns-empty-dimension"
-                            onClick={() => {
-                              if (dimensionContainerState.isOpen) {
-                                setDimensionContainerState(initialDimensionContainerState);
-                              } else {
-                                setDimensionContainerState({
-                                  isOpen: true,
-                                  openId: newId,
-                                  addingToGroupId: group.groupId,
-                                });
-                              }
-                            }}
-                          >
-                            <FormattedMessage
-                              id="xpack.lens.configure.emptyConfig"
-                              defaultMessage="Drop a field or click to add"
-                            />
-                          </EuiButtonEmpty>
-                        }
-                        panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
-                          defaultMessage: '{groupLabel} configuration',
-                          values: {
-                            groupLabel: group.groupLabel,
-                          },
-                        })}
-                        panel={
-                          <NativeRenderer
-                            render={props.datasourceMap[datasourceId].renderDimensionEditor}
-                            nativeProps={{
-                              ...layerDatasourceConfigProps,
-                              core: props.core,
-                              columnId: newId,
-                              filterOperations: group.filterOperations,
-                              suggestedPriority: group.suggestedPriority,
-
-                              setState: (newState: unknown) => {
-                                props.updateAll(
-                                  datasourceId,
-                                  newState,
-                                  activeVisualization.setDimension({
-                                    layerId,
-                                    groupId: group.groupId,
-                                    columnId: newId,
-                                    prevState: props.visualizationState,
-                                  })
-                                );
-                                setDimensionContainerState({
-                                  isOpen: true,
-                                  openId: newId,
-                                  addingToGroupId: null, // clear now that dimension exists
-                                });
-                              },
-                            }}
-                          />
-                        }
-                      />
+                      <EuiButtonEmpty
+                        className="lnsLayerPanel__triggerLink"
+                        color="text"
+                        size="xs"
+                        iconType="plusInCircleFilled"
+                        contentProps={{
+                          className: 'lnsLayerPanel__triggerLinkContent',
+                        }}
+                        data-test-subj="lns-empty-dimension"
+                        onClick={() => {
+                          if (activeId) {
+                            setActiveDimension(initialActiveDimensionState);
+                          } else {
+                            setActiveDimension({
+                              isNew: true,
+                              activeGroup: group,
+                              activeId: newId,
+                            });
+                          }
+                        }}
+                      >
+                        <FormattedMessage
+                          id="xpack.lens.configure.emptyConfig"
+                          defaultMessage="Drop a field or click to add"
+                        />
+                      </EuiButtonEmpty>
                     </div>
                   </DragDrop>
                 ) : null}
@@ -472,6 +378,60 @@ export function LayerPanel(
             </EuiFormRow>
           );
         })}
+        <DimensionContainer
+          isOpen={!!activeId}
+          groupLabel={activeGroup?.groupLabel || ''}
+          handleClose={() => setActiveDimension(initialActiveDimensionState)}
+          panel={
+            <>
+              {activeGroup && activeId && (
+                <NativeRenderer
+                  render={props.datasourceMap[datasourceId].renderDimensionEditor}
+                  nativeProps={{
+                    ...layerDatasourceConfigProps,
+                    core: props.core,
+                    columnId: activeId,
+                    filterOperations: activeGroup.filterOperations,
+                    suggestedPriority: activeGroup?.suggestedPriority,
+                    setState: (newState: unknown) => {
+                      props.updateAll(
+                        datasourceId,
+                        newState,
+                        activeVisualization.setDimension({
+                          layerId,
+                          groupId: activeGroup.groupId,
+                          columnId: activeId,
+                          prevState: props.visualizationState,
+                        })
+                      );
+                      setActiveDimension({
+                        ...activeDimension,
+                        isNew: false,
+                      });
+                    },
+                  }}
+                />
+              )}
+              {activeGroup &&
+                activeId &&
+                !activeDimension.isNew &&
+                activeVisualization.renderDimensionEditor &&
+                activeGroup?.enableDimensionEditor && (
+                  <div className="lnsLayerPanel__styleEditor">
+                    <NativeRenderer
+                      render={activeVisualization.renderDimensionEditor}
+                      nativeProps={{
+                        ...layerVisualizationConfigProps,
+                        groupId: activeGroup.groupId,
+                        accessor: activeId,
+                        setState: props.updateVisualization,
+                      }}
+                    />
+                  </div>
+                )}
+            </>
+          }
+        />
 
         <EuiSpacer size="s" />
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
index d42c5c3b99e53..c172c6da6848c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
@@ -10,6 +10,7 @@ import {
   FramePublicAPI,
   Datasource,
   DatasourceDimensionEditorProps,
+  VisualizationDimensionGroupConfig,
 } from '../../../types';
 
 export interface ConfigPanelWrapperProps {
@@ -30,8 +31,8 @@ export interface ConfigPanelWrapperProps {
   core: DatasourceDimensionEditorProps['core'];
 }
 
-export interface DimensionContainerState {
-  isOpen: boolean;
-  openId: string | null;
-  addingToGroupId: string | null;
+export interface ActiveDimensionState {
+  isNew: boolean;
+  activeId?: string;
+  activeGroup?: VisualizationDimensionGroupConfig;
 }