fix: [Dashboard > Create new rule][SCREEN READER]: Headings must be properly nested for usability (#179684)

Closes: https://github.com/elastic/security-team/issues/8651

## Description

The Create new rule form has a number of headings that are improperly
nested (wrong level) and one form label that's incorrectly been tagged
as a heading. This makes for a more difficult screen reader experience;
a large number of screen reader users [primarily navigate by
headings](https://webaim.org/projects/screenreadersurvey9/#finding).

### Steps to recreate

1. Open [Create new
rule](https://kibana.siem.estc.dev/app/security/rules/create)
2. Open [HeadingsMap
extension](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?pli=1)
or your preferred screen reader
3. If using a screen reader, traverse the page by headings only to hear
the perceived importance of information

#### What was done?: 

1. The layout has been updated to utilize `EuiFormRow`.
2. Fixed issues with resizing the container.

Before: 


3a9cec61-e353-4fb9-acd0-fe7a05f9d23b



After:


2ccdd8ab-f287-43e3-919a-a42fc6d30272

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/rule_preview/index.tsx

@@ -17,6 +17,7 @@ import {
   EuiSuperUpdateButton,
   EuiText,
   EuiTitle,
+  EuiFormRow,
 } from '@elastic/eui';
 import moment from 'moment';
 import type { List } from '@kbn/securitysolution-io-ts-list-types';
@@ -210,7 +211,7 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
   );
 
   return (
-    <>
+    <div data-test-subj="rule-preview">
       <EuiTitle size="m">
         <h2>{i18n.RULE_PREVIEW_TITLE}</h2>
       </EuiTitle>
@@ -231,11 +232,10 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
           <EuiSpacer />
         </>
       )}
-      <EuiText size="xs" data-test-subj="rule-preview">
-        <h4>{i18n.QUERY_PREVIEW_LABEL}</h4>
-      </EuiText>
       <EuiSpacer size="xs" />
-      <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
+      <EuiFormRow label={i18n.QUERY_PREVIEW_LABEL}>
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive>
+          <EuiFlexItem grow>
             <EuiSuperDatePicker
               start={startDate}
               end={endDate}
@@ -245,7 +245,9 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
               commonlyUsedRanges={timeRanges}
               onRefresh={onTimeframeRefresh}
               data-test-subj="preview-time-frame"
+              width="full"
             />
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiSuperUpdateButton
               isDisabled={isDateRangeInvalid || isDisabled}
@@ -254,9 +256,11 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
               color={isDirty ? 'success' : 'primary'}
               fill={true}
               data-test-subj="previewSubmitButton"
+              fullWidth={true}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+      </EuiFormRow>
       <EuiSpacer size="l" />
       {isPreviewRequestInProgress && <LoadingHistogram />}
       {!isPreviewRequestInProgress && previewId && spaceId && (
@@ -270,7 +274,7 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
         />
       )}
       <PreviewLogs logs={logs} hasNoiseWarning={hasNoiseWarning} isAborted={isAborted} />
-    </>
+    </div>
   );
 };