diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index b1be86dc..953f01ae 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -98,9 +98,10 @@
 
     @include config.between('sm-column-break', 'lg-page-break') {
       gap: var(--shim) var(--gutter);
+      // fixed width column to prevent layout shift as the ratio number changes
       grid-template:
         'heading number' min-content
-        'intro   intro' 1fr / auto 1fr;
+        'intro   intro' 1fr / auto var(--ratio-width);
     }
 
     @include config.above('lg-page-break') {
@@ -134,6 +135,7 @@
     align-items: start;
     display: inline-flex;
     grid-area: number;
+    justify-content: flex-end;
     line-height: 0.7; // weird number alignment
   }
 
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index ac92be25..ff824f15 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -12,5 +12,6 @@ $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
 $icon-medium: 1.65em;
+$ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;