diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 833278454a..3797bd24e9 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -187,6 +187,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     return css`
       ha-card {
         height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
       .card-header {
         display: flex;
@@ -199,6 +202,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         text-overflow: ellipsis;
       }
 
+      #states {
+        flex: 1;
+      }
+
       #states > * {
         margin: 8px 0;
       }
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index 24d9470075..6d0f2aa4f8 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -189,6 +189,12 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      ha-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
       ha-card > div {
         cursor: pointer;
       }
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 70e807d45e..5bbdb62781 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -125,16 +125,17 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         <div class="content">
           <div id="controls">
             <div id="slider">
-              ${supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
-                ? html`
-                    <round-slider
-                      min="0"
-                      .value=${brightness}
-                      @value-changing=${this._dragEvent}
-                      @value-changed=${this._setBrightness}
-                    ></round-slider>
-                  `
-                : ""}
+              <round-slider
+                min="0"
+                .value=${brightness}
+                @value-changing=${this._dragEvent}
+                @value-changed=${this._setBrightness}
+                style=${styleMap({
+                  visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
+                    ? "visible"
+                    : "hidden",
+                })}
+              ></round-slider>
               <paper-icon-button
                 class="light-button ${classMap({
                   "slider-center": supportsFeature(
@@ -322,6 +323,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--paper-item-icon-color, #44739e);
         width: 60%;
         height: auto;
+        position: absolute;
+        max-width: calc(100% - 40px);
+        box-sizing: border-box;
+        border-radius: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
 
       .light-button.state-on {
@@ -332,16 +340,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--state-icon-unavailable-color);
       }
 
-      .slider-center {
-        position: absolute;
-        max-width: calc(100% - 40px);
-        box-sizing: border-box;
-        border-radius: 100%;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
       #info {
         text-align: center;
         margin-top: -56px;
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index f6f3a73866..5161d76fae 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -239,24 +239,26 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           tabindex="0"
         ></paper-icon-button>
 
-        <div id="controls">
-          <div id="slider">
-            ${slider}
-            <div id="slider-center">
-              <div id="temperature">
-                ${currentTemperature} ${setValues}
+        <div class="content">
+          <div id="controls">
+            <div id="slider">
+              ${slider}
+              <div id="slider-center">
+                <div id="temperature">
+                  ${currentTemperature} ${setValues}
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div id="info">
-          <div id="modes">
-            ${(stateObj.attributes.hvac_modes || [])
-              .concat()
-              .sort(compareClimateHvacModes)
-              .map((modeItem) => this._renderIcon(modeItem, mode))}
+          <div id="info">
+            <div id="modes">
+              ${(stateObj.attributes.hvac_modes || [])
+                .concat()
+                .sort(compareClimateHvacModes)
+                .map((modeItem) => this._renderIcon(modeItem, mode))}
+            </div>
+            ${name}
           </div>
-          ${name}
         </div>
       </ha-card>
     `;
@@ -423,6 +425,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       }
 
       ha-card {
+        height: 100%;
         position: relative;
         overflow: hidden;
         --name-font-size: 1.2rem;
@@ -481,6 +484,13 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         z-index: 25;
       }
 
+      .content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
       #controls {
         display: flex;
         justify-content: center;