diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css
index 6db465981..0c52a0762 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css
@@ -1,5 +1,7 @@
 .base {
+  display: flex;
   margin-inline-start: auto;
+  align-items: center;
 }
 
 .clearButton {
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx
index d67d23be3..b5388aae0 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx
@@ -3,7 +3,6 @@ import { useLocalizedStringFormatter, clsx } from '@koobiq/react-core';
 import { IconCircleXmark16 } from '@koobiq/react-icons';
 
 import { Button } from '../../../Button';
-import { FlexBox } from '../../../FlexBox';
 import intlMessages from '../../intl.json';
 import { ActionsPanelDivider } from '../ActionsPanelDivider';
 
@@ -24,7 +23,7 @@ export const ActionsPanelClearButton = ({
   const t = useLocalizedStringFormatter(intlMessages);
 
   return (
-    <FlexBox className={clsx(s.base, className)} alignItems="center" {...other}>
+    <div className={clsx(s.base, className)} {...other}>
       <ActionsPanelDivider />
       <Button
         className={s.clearButton}
@@ -33,6 +32,6 @@ export const ActionsPanelClearButton = ({
         startIcon={<IconCircleXmark16 />}
         onlyIcon
       />
-    </FlexBox>
+    </div>
   );
 };
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css
index 23c855286..12ad6701e 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css
@@ -1,5 +1,7 @@
 .base {
   order: -1;
+  display: flex;
+  align-items: center;
 }
 
 .base[aria-hidden='true'] {
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx
index e699ee64e..8ccc3a065 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx
@@ -6,7 +6,6 @@ import {
 import { clsx, useLocalizedStringFormatter } from '@koobiq/react-core';
 
 import { Badge } from '../../../Badge';
-import { FlexBox } from '../../../FlexBox';
 import { Typography } from '../../../Typography';
 import intlMessages from '../../intl.json';
 import { ActionsPanelDivider } from '../ActionsPanelDivider';
@@ -32,7 +31,7 @@ export const ActionsPanelCounter = ({
   const isAll = selectedItemCount === 'all';
 
   return (
-    <FlexBox alignItems="center" className={clsx(s.base, className)} {...other}>
+    <div className={clsx(s.base, className)} {...other}>
       <Typography
         as="div"
         className={s.text}
@@ -55,6 +54,6 @@ export const ActionsPanelCounter = ({
         )}
       </Typography>
       <ActionsPanelDivider />
-    </FlexBox>
+    </div>
   );
 };