diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
index b6b46057f8981..ffed5364cf1b3 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
@@ -163,7 +163,6 @@ export function RuleComponent({
 
   return (
     <>
-      <EuiHorizontalRule />
       <EuiFlexGroup>
         <EuiFlexItem grow={1}>
           <EuiPanel color="subdued" hasBorder={false}>
@@ -171,6 +170,7 @@ export function RuleComponent({
               gutterSize="none"
               direction="column"
               justifyContent="spaceBetween"
+              responsive={false}
               style={{ height: '100%' }}
             >
               <EuiFlexItem>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx
index d648a5888870d..b2783aa3ecd83 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx
@@ -263,6 +263,96 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
             values={{ ruleName: rule.name }}
           />
         }
+        description={
+          <EuiFlexGroup gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.ruleDetails.triggerActionsTitle"
+                        defaultMessage="Trigger actions"
+                      />
+                    </p>
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <RuleStatusDropdown
+                    disableRule={async () => await disableRule(rule)}
+                    enableRule={async () => await enableRule(rule)}
+                    snoozeRule={async (snoozeEndTime: string | -1) =>
+                      await snoozeRule(rule, snoozeEndTime)
+                    }
+                    unsnoozeRule={async () => await unsnoozeRule(rule)}
+                    item={rule as RuleTableItem}
+                    onRuleChanged={requestRefresh}
+                    direction="row"
+                    isEditable={hasEditButton}
+                    previousSnoozeInterval={null}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.ruleTypeTitle"
+                        defaultMessage="Type"
+                      />
+                    </p>
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiBadge data-test-subj="ruleTypeLabel">{ruleType.name}</EuiBadge>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={1}>
+              {uniqueActions && uniqueActions.length ? (
+                <EuiFlexGroup responsive={false} gutterSize="xs">
+                  <EuiFlexItem>
+                    <EuiText size="s">
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsTex"
+                        defaultMessage="Actions"
+                      />{' '}
+                      {hasActionsWithBrokenConnector && (
+                        <EuiIconTip
+                          data-test-subj="actionWithBrokenConnector"
+                          type="alert"
+                          color="danger"
+                          content={i18n.translate(
+                            'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsWarningTooltip',
+                            {
+                              defaultMessage:
+                                'Unable to load one of the connectors associated with this rule. Edit the rule to select a new connector.',
+                            }
+                          )}
+                          position="right"
+                        />
+                      )}
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiFlexGroup wrap gutterSize="s">
+                      {uniqueActions.map((action, index) => (
+                        <EuiFlexItem key={index} grow={false}>
+                          <EuiBadge color="hollow" data-test-subj="actionTypeLabel">
+                            {actionTypesByTypeId[action].name ?? action}
+                          </EuiBadge>
+                        </EuiFlexItem>
+                      ))}
+                    </EuiFlexGroup>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              ) : null}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
         rightSideItems={[
           <ViewInApp rule={rule} />,
           <EuiButtonEmpty
@@ -282,94 +372,6 @@ export const RuleDetails: React.FunctionComponent<RuleDetailsProps> = ({
       />
       <EuiSpacer size="l" />
       <EuiPageContentBody>
-        <EuiFlexGroup responsive={false} gutterSize="m">
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup responsive={false} gutterSize="xs">
-              <EuiFlexItem grow={false} style={{ flexBasis: 'fit-content' }}>
-                <EuiText size="s">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.ruleDetails.triggerActionsTitle"
-                      defaultMessage="Trigger actions"
-                    />
-                  </p>
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <RuleStatusDropdown
-                  disableRule={async () => await disableRule(rule)}
-                  enableRule={async () => await enableRule(rule)}
-                  snoozeRule={async (snoozeEndTime: string | -1) =>
-                    await snoozeRule(rule, snoozeEndTime)
-                  }
-                  unsnoozeRule={async () => await unsnoozeRule(rule)}
-                  item={rule as RuleTableItem}
-                  onRuleChanged={requestRefresh}
-                  direction="row"
-                  isEditable={hasEditButton}
-                  previousSnoozeInterval={null}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup responsive={false} gutterSize="xs">
-              <EuiFlexItem>
-                <EuiText size="s">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.ruleTypeTitle"
-                      defaultMessage="Type"
-                    />
-                  </p>
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiBadge data-test-subj="ruleTypeLabel">{ruleType.name}</EuiBadge>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem grow={1}>
-            {uniqueActions && uniqueActions.length ? (
-              <EuiFlexGroup responsive={false} gutterSize="xs">
-                <EuiFlexItem>
-                  <EuiText size="s">
-                    <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsTex"
-                      defaultMessage="Actions"
-                    />{' '}
-                    {hasActionsWithBrokenConnector && (
-                      <EuiIconTip
-                        data-test-subj="actionWithBrokenConnector"
-                        type="alert"
-                        color="danger"
-                        content={i18n.translate(
-                          'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.actionsWarningTooltip',
-                          {
-                            defaultMessage:
-                              'Unable to load one of the connectors associated with this rule. Edit the rule to select a new connector.',
-                          }
-                        )}
-                        position="right"
-                      />
-                    )}
-                  </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiFlexGroup wrap gutterSize="s">
-                    {uniqueActions.map((action, index) => (
-                      <EuiFlexItem key={index} grow={false}>
-                        <EuiBadge color="hollow" data-test-subj="actionTypeLabel">
-                          {actionTypesByTypeId[action].name ?? action}
-                        </EuiBadge>
-                      </EuiFlexItem>
-                    ))}
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : null}
-          </EuiFlexItem>
-        </EuiFlexGroup>
         {rule.enabled &&
         rule.executionStatus.error?.reason === AlertExecutionStatusErrorReasons.License ? (
           <EuiFlexGroup>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
index bb8eaa3bfc137..098d7c08a78f5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
@@ -158,9 +158,10 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
   return (
     <EuiFlexGroup
       direction={direction}
-      alignItems={direction === 'row' ? 'flexEnd' : 'flexStart'}
+      alignItems={direction === 'row' ? 'center' : 'flexStart'}
       justifyContent="flexStart"
-      gutterSize="s"
+      gutterSize={direction === 'row' ? 's' : 'xs'}
+      responsive={false}
     >
       <EuiFlexItem grow={false}>
         {isEditable ? (