diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
index a30c50df2cc9..2f563d86a6d4 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
@@ -1,6 +1,7 @@
 .pipelineProcessorsEditor__form__dragAndDropList {
   &__panel {
-    box-shadow: none;
+    background-color: $euiColorLightestShade;
+    padding: $euiSizeM;
   }
 
   &__grabIcon {
@@ -16,9 +17,12 @@
   }
 
   &__item {
-    background-color: $euiColorEmptyShade;
-    padding-top: $euiSizeM;
-    padding-bottom: $euiSizeM;
-    border-bottom: $euiBorderThin;
+    background-color: $euiColorLightestShade;
+    padding-top: $euiSizeS;
+    padding-bottom: $euiSizeS;
+  }
+
+  &__labelContainer {
+    margin-bottom: $euiSizeXS;
   }
 }
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
index f029eea1db4f..63e1fdaa9a8f 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
@@ -16,10 +16,10 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiPanel,
-  EuiSpacer,
   EuiFieldText,
   EuiIconTip,
+  EuiFormRow,
+  EuiText,
 } from '@elastic/eui';
 
 import {
@@ -32,6 +32,9 @@ import {
 import './drag_and_drop_text_list.scss';
 
 interface Props {
+  label: string;
+  helpText: React.ReactNode;
+  error: string | null;
   value: ArrayItem[];
   onMove: (sourceIdx: number, destinationIdx: number) => void;
   onAdd: () => void;
@@ -51,6 +54,9 @@ const i18nTexts = {
 };
 
 function DragAndDropTextListComponent({
+  label,
+  helpText,
+  error,
   value,
   onMove,
   onAdd,
@@ -59,6 +65,7 @@ function DragAndDropTextListComponent({
   textValidation,
 }: Props): JSX.Element {
   const [droppableId] = useState(() => uuid.v4());
+  const [firstItemId] = useState(() => uuid.v4());
 
   const onDragEnd = useCallback(
     ({ source, destination }) => {
@@ -69,110 +76,132 @@ function DragAndDropTextListComponent({
     [onMove]
   );
   return (
-    <EuiPanel
-      className="pipelineProcessorsEditor__form__dragAndDropList__panel"
-      hasShadow={false}
-      paddingSize="s"
-    >
-      <EuiDragDropContext onDragEnd={onDragEnd}>
-        <EuiDroppable droppableId={droppableId}>
-          {value.map((item, idx) => {
-            return (
-              <EuiDraggable
-                customDragHandle
-                spacing="none"
-                draggableId={String(item.id)}
-                index={idx}
-                key={item.id}
-              >
-                {(provided) => {
-                  return (
-                    <EuiFlexGroup
-                      className="pipelineProcessorsEditor__form__dragAndDropList__item"
-                      justifyContent="center"
-                      alignItems="center"
-                      gutterSize="none"
-                    >
-                      <EuiFlexItem grow={false}>
-                        <div {...provided.dragHandleProps}>
-                          <EuiIcon
-                            className="pipelineProcessorsEditor__form__dragAndDropList__grabIcon"
-                            type="grab"
-                          />
-                        </div>
-                      </EuiFlexItem>
-                      <EuiFlexItem>
-                        <UseField<string>
-                          path={item.path}
-                          config={{
-                            validations: textValidation
-                              ? [{ validator: textValidation }]
-                              : undefined,
-                          }}
-                          readDefaultValueOnForm={!item.isNew}
+    <EuiFormRow isInvalid={typeof error === 'string'} error={error} fullWidth>
+      <>
+        {/* Label and help text. Also wire up the htmlFor so the label points to the first text field. */}
+        <EuiFlexGroup
+          className="pipelineProcessorsEditor__form__dragAndDropList__labelContainer"
+          justifyContent="flexStart"
+          direction="column"
+          gutterSize="none"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiText size="xs">
+              <label htmlFor={firstItemId}>
+                <strong>{label}</strong>
+              </label>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="xs" color="subdued">
+              <p>{helpText}</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        {/* The processor panel */}
+        <div className="pipelineProcessorsEditor__form__dragAndDropList__panel">
+          <EuiDragDropContext onDragEnd={onDragEnd}>
+            <EuiDroppable droppableId={droppableId}>
+              {value.map((item, idx) => {
+                return (
+                  <EuiDraggable
+                    customDragHandle
+                    spacing="none"
+                    draggableId={String(item.id)}
+                    index={idx}
+                    key={item.id}
+                  >
+                    {(provided) => {
+                      return (
+                        <EuiFlexGroup
+                          className="pipelineProcessorsEditor__form__dragAndDropList__item"
+                          justifyContent="center"
+                          alignItems="center"
+                          gutterSize="none"
                         >
-                          {(field) => {
-                            const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(
-                              field
-                            );
-                            return (
-                              <EuiFlexGroup gutterSize="none" alignItems="center">
-                                <EuiFlexItem>
-                                  <EuiFieldText
-                                    isInvalid={isInvalid}
-                                    value={field.value}
-                                    onChange={field.onChange}
-                                    compressed
-                                    fullWidth
-                                  />
-                                </EuiFlexItem>
-                                {typeof errorMessage === 'string' && (
-                                  <EuiFlexItem grow={false}>
-                                    <div className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon">
-                                      <EuiIconTip
-                                        aria-label={errorMessage}
-                                        content={errorMessage}
-                                        type="alert"
-                                        color="danger"
+                          <EuiFlexItem grow={false}>
+                            <div {...provided.dragHandleProps}>
+                              <EuiIcon
+                                className="pipelineProcessorsEditor__form__dragAndDropList__grabIcon"
+                                type="grab"
+                              />
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem>
+                            <UseField<string>
+                              path={item.path}
+                              config={{
+                                validations: textValidation
+                                  ? [{ validator: textValidation }]
+                                  : undefined,
+                              }}
+                              readDefaultValueOnForm={!item.isNew}
+                            >
+                              {(field) => {
+                                const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(
+                                  field
+                                );
+                                return (
+                                  <EuiFlexGroup gutterSize="none" alignItems="center">
+                                    <EuiFlexItem>
+                                      <EuiFieldText
+                                        id={idx === 0 ? firstItemId : undefined}
+                                        isInvalid={isInvalid}
+                                        value={field.value}
+                                        onChange={field.onChange}
+                                        compressed
+                                        fullWidth
                                       />
-                                    </div>
-                                  </EuiFlexItem>
-                                )}
-                              </EuiFlexGroup>
-                            );
-                          }}
-                        </UseField>
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        {value.length > 1 ? (
-                          <EuiButtonIcon
-                            aria-label={i18nTexts.removeItemButtonAriaLabel}
-                            className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
-                            iconType="minusInCircle"
-                            color="danger"
-                            onClick={() => onRemove(item.id)}
-                          />
-                        ) : (
-                          // Render a no-op placeholder button
-                          <EuiIcon
-                            className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
-                            type="empty"
-                          />
-                        )}
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  );
-                }}
-              </EuiDraggable>
-            );
-          })}
-        </EuiDroppable>
-      </EuiDragDropContext>
-      {value.length ? <EuiSpacer size="s" /> : null}
-      <EuiButtonEmpty iconType="plusInCircle" onClick={onAdd}>
-        {addLabel}
-      </EuiButtonEmpty>
-    </EuiPanel>
+                                    </EuiFlexItem>
+                                    {typeof errorMessage === 'string' && (
+                                      <EuiFlexItem grow={false}>
+                                        <div className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon">
+                                          <EuiIconTip
+                                            aria-label={errorMessage}
+                                            content={errorMessage}
+                                            type="alert"
+                                            color="danger"
+                                          />
+                                        </div>
+                                      </EuiFlexItem>
+                                    )}
+                                  </EuiFlexGroup>
+                                );
+                              }}
+                            </UseField>
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={false}>
+                            {value.length > 1 ? (
+                              <EuiButtonIcon
+                                aria-label={i18nTexts.removeItemButtonAriaLabel}
+                                className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
+                                iconType="minusInCircle"
+                                color="danger"
+                                onClick={() => onRemove(item.id)}
+                              />
+                            ) : (
+                              // Render a no-op placeholder button
+                              <EuiIcon
+                                className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
+                                type="empty"
+                              />
+                            )}
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      );
+                    }}
+                  </EuiDraggable>
+                );
+              })}
+            </EuiDroppable>
+          </EuiDragDropContext>
+          <EuiButtonEmpty iconType="plusInCircle" onClick={onAdd}>
+            {addLabel}
+          </EuiButtonEmpty>
+        </div>
+      </>
+    </EuiFormRow>
   );
 }
 
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/grok.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/grok.tsx
index 40ddeddc0c4e..5df30be3407a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/grok.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/grok.tsx
@@ -6,7 +6,6 @@
 
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow } from '@elastic/eui';
 
 import {
   FIELD_TYPES,
@@ -124,22 +123,17 @@ export const Grok: FunctionComponent = () => {
       <UseArray path="fields.patterns" validations={fieldsConfig.patterns.validations}>
         {({ items, addItem, removeItem, moveItem, error }) => {
           return (
-            <EuiFormRow
-              label={fieldsConfig.patterns.label}
+            <DragAndDropTextList
+              label={fieldsConfig.patterns.label!}
               helpText={fieldsConfig.patterns.helpText}
-              isInvalid={typeof error === 'string'}
               error={error}
-              fullWidth
-            >
-              <DragAndDropTextList
-                value={items}
-                onMove={moveItem}
-                onAdd={addItem}
-                onRemove={removeItem}
-                addLabel={i18nTexts.addPatternLabel}
-                textValidation={patternValidation}
-              />
-            </EuiFormRow>
+              value={items}
+              onMove={moveItem}
+              onAdd={addItem}
+              onRemove={removeItem}
+              addLabel={i18nTexts.addPatternLabel}
+              textValidation={patternValidation}
+            />
           );
         }}
       </UseArray>