diff --git a/src/components/ha-climate-state.html b/src/components/ha-climate-state.html
index 74a8d5de38..962b054298 100644
--- a/src/components/ha-climate-state.html
+++ b/src/components/ha-climate-state.html
@@ -7,6 +7,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        white-space: nowrap;
       }
 
       .target {
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index b55a22ede3..3b89d25e09 100644
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -16,12 +16,17 @@
         @apply(--layout-baseline);
       }
 
+      state-info {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
       .state {
         @apply --paper-font-body1;
         color: var(--primary-text-color);
         margin-left: 16px;
         text-align: right;
-        flex: 1 0 50px;
+        max-width: 40%;
+        flex: 0 0 auto;
       }
       .state.has-unit_of_measurement {
         white-space: nowrap;