diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index 980b6cb91340..2856239b11ea 100644
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -99,6 +99,10 @@ class StateInfo extends LitElement {
         align-items: center;
       }
 
+      state-badge {
+        flex: none;
+      }
+
       .info {
         margin-left: 8px;
         display: flex;
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index 9d0f570158d2..6f106a79b266 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -70,19 +70,21 @@ export class StateCardDisplay extends LitElement {
       haStyle,
       css`
         state-info {
-          flex: 0 0 fit-content;
-          min-width: 0;
+          flex: 0 1 fit-content;
+          min-width: 120px;
         }
         .state {
           color: var(--primary-text-color);
           margin-inline-start: 16px;
           margin-inline-end: initial;
           text-align: var(--float-end, right);
+          min-width: 50px;
           flex: 0 1 fit-content;
           word-break: break-word;
           display: flex;
           align-items: center;
           direction: ltr;
+          justify-content: flex-end;
         }
         .state.has-unit_of_measurement {
           white-space: nowrap;