diff --git a/templates/index.html b/templates/index.html
index f57a5f1..5ae8f32 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -91,7 +91,7 @@
     </h5>
     
     <div class="row">
-      <div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>
+      <div id="info_col" class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>
 
       {% set first_yr=2025 %}
       {% for date, dollars in savings %}
@@ -121,7 +121,7 @@
             <div class="alert alert-success">Super kicks in!!!</div>
         {% endif %}
         {% if COMP %}
-            <div style="width:168px" class="alert alert-info">Note: {{ '$%0.2f' % COMP['amount']|float }} is the final value of the compared to data. Hover over blue labels above to see what compared to values differed</div>
+            <div id="info_alert" class="alert alert-info">Note: {{ '$%0.2f' % COMP['amount']|float }} is the final value of the compared to data. Hover over blue labels above to see what compared to values differed</div>
 
         {% endif %}
       </div>
@@ -162,6 +162,11 @@
 
             var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle='tooltip']"))
             var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
+
+            var parentWidth = $('#info_col').width();
+
+            // Set the alert's `max-width` to the parent's width
+            $('#info_alert').css('max-width', parentWidth + 'px');
         };
 
         document.addEventListener('DOMContentLoaded', function () {