diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index 93bd745e87..10fb56e096 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -17,6 +17,7 @@ import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
 import "../ha-switch";
+import "../ha-formfield";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -29,6 +30,8 @@ export class HaEntityToggle extends LitElement {
 
   @property() public stateObj?: HassEntity;
 
+  @property() public label?: string;
+
   @internalProperty() private _isOn = false;
 
   protected render(): TemplateResult {
@@ -55,15 +58,21 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
+    const switchTemplate = html`<ha-switch
+      aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
+        this._isOn ? "off" : "on"
+      }`}
+      .checked=${this._isOn}
+      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+      @change=${this._toggleChanged}
+    ></ha-switch>`;
+
+    if (!this.label) {
+      return switchTemplate;
+    }
+
     return html`
-      <ha-switch
-        aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
-          this._isOn ? "off" : "on"
-        }`}
-        .checked=${this._isOn}
-        .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
-        @change=${this._toggleChanged}
-      ></ha-switch>
+      <ha-formfield .label=${this.label}>${switchTemplate}</ha-formfield>
     `;
   }
 
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index dca916a6d0..a7af6b6879 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -197,7 +197,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
               ${this.narrow
                 ? html` <span slot="header">${this._config?.alias}</span> `
                 : ""}
-              <div class="content">
+              <div
+                class="content ${classMap({
+                  "yaml-mode": this._mode === "yaml",
+                })}"
+              >
                 ${this._errors
                   ? html` <div class="errors">${this._errors}</div> `
                   : ""}
@@ -223,52 +227,52 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                     `
                   : this._mode === "yaml"
                   ? html`
-                      <ha-config-section .isWide=${false}>
-                        ${!this.narrow
-                          ? html`
-                              <span slot="header">${this._config.alias}</span>
-                            `
-                          : ``}
-                        <ha-card>
-                          <div class="card-content">
-                            <ha-yaml-editor
-                              .defaultValue=${this._preprocessYaml()}
-                              @value-changed=${this._yamlChanged}
-                            ></ha-yaml-editor>
-                            <mwc-button @click=${this._copyYaml}>
-                              ${this.hass.localize(
-                                "ui.panel.config.automation.editor.copy_to_clipboard"
-                              )}
-                            </mwc-button>
-                          </div>
-                          ${stateObj
-                            ? html`
-                                <div
-                                  class="card-actions layout horizontal justified center"
-                                >
-                                  <div class="layout horizontal center">
-                                    <ha-entity-toggle
-                                      .hass=${this.hass}
-                                      .stateObj=${stateObj}
-                                    ></ha-entity-toggle>
-                                    ${this.hass.localize(
-                                      "ui.panel.config.automation.editor.enable_disable"
-                                    )}
-                                  </div>
-                                  <mwc-button
-                                    @click=${this._runActions}
-                                    .stateObj=${stateObj}
-                                  >
-                                    ${this.hass.localize(
-                                      "ui.card.automation.trigger"
-                                    )}
-                                  </mwc-button>
-                                </div>
-                              `
-                            : ""}
-                        </ha-card>
-                        <ha-config-section> </ha-config-section
-                      ></ha-config-section>
+                      ${!this.narrow
+                        ? html`
+                            <ha-card
+                              ><div class="card-header">
+                                ${this._config.alias}
+                              </div>
+                              ${stateObj
+                                ? html`
+                                    <div
+                                      class="card-actions layout horizontal justified center"
+                                    >
+                                      <ha-entity-toggle
+                                        .hass=${this.hass}
+                                        .stateObj=${stateObj}
+                                        .label=${this.hass.localize(
+                                          "ui.panel.config.automation.editor.enable_disable"
+                                        )}
+                                      ></ha-entity-toggle>
+
+                                      <mwc-button
+                                        @click=${this._runActions}
+                                        .stateObj=${stateObj}
+                                      >
+                                        ${this.hass.localize(
+                                          "ui.card.automation.trigger"
+                                        )}
+                                      </mwc-button>
+                                    </div>
+                                  `
+                                : ""}
+                            </ha-card>
+                          `
+                        : ``}
+                      <ha-yaml-editor
+                        .defaultValue=${this._preprocessYaml()}
+                        @value-changed=${this._yamlChanged}
+                      ></ha-yaml-editor>
+                      <ha-card
+                        ><div class="card-actions">
+                          <mwc-button @click=${this._copyYaml}>
+                            ${this.hass.localize(
+                              "ui.panel.config.automation.editor.copy_to_clipboard"
+                            )}
+                          </mwc-button>
+                        </div>
+                      </ha-card>
                     `
                   : ``}
               </div>
@@ -531,6 +535,22 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .content {
           padding-bottom: 20px;
         }
+        .yaml-mode {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          padding-bottom: 0;
+        }
+        ha-yaml-editor {
+          flex-grow: 1;
+          --code-mirror-height: 100%;
+          min-height: 0;
+        }
+        .yaml-mode ha-card {
+          overflow: initial;
+          --ha-card-border-radius: 0;
+          border-bottom: 1px solid var(--divider-color);
+        }
         p {
           margin-bottom: 0;
         }