diff --git a/styleguide.css b/styleguide.css
index 6608ea3..143f9f6 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1064,12 +1064,34 @@ section + section {
 
     #component-slider .sg-activatable-row {
       display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-columns: auto var(--layout-input-label-width) minmax(0, 1fr) auto;
       align-items: center;
-      column-gap: var(--spacing-small);
+      column-gap: var(--spacing-large);
       width: 100%;
     }
 
+    #component-slider .sg-activatable-row .sg-slider-row {
+      display: contents;
+    }
+
+    #component-slider .sg-activatable-row .sg-slider-row .sg-label {
+      grid-column: 2;
+      min-width: 0;
+    }
+
+    #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
+      grid-column: 3;
+      width: 100%;
+      max-width: none;
+      min-width: 0;
+    }
+
+    #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
+      grid-column: 4;
+      justify-self: end;
+      min-width: calc(var(--interaction-height) * 1.25);
+    }
+
     .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
       display: grid;
       grid-template-columns:
@@ -1119,26 +1141,27 @@ section + section {
       #component-slider .sg-activatable-row {
         grid-template-columns: auto minmax(0, 1fr);
         align-items: start;
-      }
-
-      #component-slider .sg-activatable-row .sg-slider-row {
-        grid-template-columns: minmax(0, 1fr) auto;
-        grid-template-areas:
-          "label label"
-          "slider value";
         row-gap: var(--spacing-small);
       }
 
+      #component-slider .sg-activatable-row .sg-slider-row {
+        display: contents;
+      }
+
       #component-slider .sg-activatable-row .sg-slider-row .sg-label {
-        grid-area: label;
+        grid-column: 2;
+        grid-row: 1;
       }
 
       #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
-        grid-area: slider;
+        grid-column: 1;
+        grid-row: 2;
       }
 
       #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
-        grid-area: value;
+        grid-column: 2;
+        grid-row: 2;
+        justify-self: end;
         align-self: center;
       }