[APM] Fix wide button sizes in ml callout (#146571)

## Summary

closes: #145870


Before 

![image](https://user-images.githubusercontent.com/3369346/204577198-def490fe-2594-4455-a180-37eec5f73715.png)

After 
<img width="1472" alt="image"
src="https://user-images.githubusercontent.com/3369346/204577164-51cd8171-69b8-4598-a531-d27cbb6bcc19.png">

x-pack/plugins/apm/public/components/shared/ml_callout/index.tsx

@@ -9,7 +9,7 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiCallOut,
-  EuiFlexGrid,
+  EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -167,7 +167,7 @@ export function MLCallout({
   const hasAnyActions = properties.primaryAction || dismissable;
 
   const actions = hasAnyActions ? (
-    <EuiFlexGrid gutterSize="s">
+    <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
       {properties.primaryAction && (
         <EuiFlexItem grow={false}>{properties.primaryAction}</EuiFlexItem>
       )}
@@ -180,7 +180,7 @@ export function MLCallout({
           </EuiButtonEmpty>
         </EuiFlexItem>
       )}
-    </EuiFlexGrid>
+    </EuiFlexGroup>
   ) : null;
 
   return (