diff --git a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts
index d6ab8eb4929a..0b2ff5fa817b 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts
@@ -1,17 +1,17 @@
 import {
-  html,
-  LitElement,
-  nothing,
-  css,
   CSSResultGroup,
+  LitElement,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../../../../types";
+import { hasConfigChanged } from "../../common/has-changed";
 import "../../components/hui-energy-period-selector";
-import { LovelaceCard } from "../../types";
+import { LovelaceCard, LovelaceLayoutOptions } from "../../types";
 import { EnergyCardBaseConfig } from "../types";
-import { hasConfigChanged } from "../../common/has-changed";
 
 @customElement("hui-energy-date-selection-card")
 export class HuiEnergyDateSelectionCard
@@ -26,6 +26,13 @@ export class HuiEnergyDateSelectionCard
     return 1;
   }
 
+  public getLayoutOptions(): LovelaceLayoutOptions {
+    return {
+      grid_rows: 1,
+      grid_columns: 4,
+    };
+  }
+
   public setConfig(config: EnergyCardBaseConfig): void {
     this._config = config;
   }
@@ -57,6 +64,13 @@ export class HuiEnergyDateSelectionCard
 
   static get styles(): CSSResultGroup {
     return css`
+    :host {
+      ha-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
       .padded {
         padding-left: 16px !important;
         padding-inline-start: 16px !important;