Added alignment

express/blocks/puf/puf.css

@@ -208,8 +208,10 @@ main .block.puf .puf-card .puf-card-bottom {
 main .block.puf .puf-card .puf-card-bottom h3 {
   font-size: var(--body-font-size-xl);
   font-weight: 600;
-  padding: 16px;
-  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
 main .block.puf .puf-card .puf-card-bottom p {
@@ -250,6 +252,7 @@ main .block.puf .puf-highlighted-text {
   border-radius: 12px;
   margin-top: 0;
   box-sizing: border-box;
+  padding: 10px;
 }
 
 main .block.puf .puf-pricing-footer {
@@ -299,7 +302,6 @@ main .block.puf .puf-card .puf-card-banner {
   border-radius: 20px 20px 0 0;
 }
 
-
 @media (min-width: 900px) {
   main .puf.block .carousel-container {
     max-width: none;
@@ -332,7 +334,10 @@ main .block.puf .puf-card .puf-card-banner {
     margin-top: -14px;
   }
 
-  main .block.puf .carousel-container:has(+ .puf-pricing-footer) .carousel-platform {
+  main
+    .block.puf
+    .carousel-container:has(+ .puf-pricing-footer)
+    .carousel-platform {
     padding-bottom: 24px;
   }
 
@@ -498,9 +503,15 @@ main .block.puf .puf-card .puf-card-banner {
     box-shadow: 0px 0px 20px #00000029;
   }
 
-  main .block.puf .puf-card-banner.recommended ~ .puf-card-bottom .puf-highlighted-text {
-  margin-bottom: 40px;
-}
+  main
+    .block.puf
+    .puf-card-banner.recommended
+    ~ .puf-card-bottom
+    .puf-highlighted-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
   main
     .block.puf

express/blocks/puf/puf.js

@@ -442,6 +442,64 @@ function highlightText($block) {
   });
 }
 
+function alignP($block) {
+  const cardLeftQuery = '.puf-card.puf-left > .puf-card-top > p:last-of-type';
+  const cardRightQuery = '.puf-card.puf-right > .puf-card-top > p:last-of-type';
+
+  const card1 = $block.querySelector(cardLeftQuery);
+  const card2 = $block.querySelector(cardRightQuery);
+
+  const adjustHeight = () => {
+      card1.style.height = 'auto';
+      card2.style.height = 'auto';
+
+      const maxHeight = Math.max(
+          card1.getBoundingClientRect().height,
+          card2.getBoundingClientRect().height,
+      );
+
+      card1.style.height = `${maxHeight}px`;
+      card2.style.height = `${maxHeight}px`;
+  };
+
+  const ro = new ResizeObserver(() => adjustHeight());
+
+  ro.observe(card1);
+  ro.observe(card2);
+
+  adjustHeight();
+}
+
+function alignHighlights($block) {
+  const cardLeftTitle = '.puf-card.puf-left > .puf-card-bottom > h3';
+  const cardRightTitle= '.puf-card.puf-right > .puf-card-bottom > h3';
+
+  const cardLeft = $block.querySelector(cardLeftTitle);
+  const cardRight= $block.querySelector(cardRightTitle);
+
+  const adjustHeight = () => {
+    cardLeft.style.height = 'auto';
+    cardRight.style.height = 'auto';
+
+    const maxHeightTitle = Math.max(
+      cardLeft.getBoundingClientRect().height,
+      cardRight.getBoundingClientRect().height
+    );
+
+
+    cardLeft.style.height = `${maxHeightTitle}px`;
+    cardRight.style.height = `${maxHeightTitle}px`;
+  };
+
+  const ro = new ResizeObserver(() => adjustHeight());
+
+  ro.observe(cardLeft);
+  ro.observe(cardRight);
+
+  adjustHeight();
+}
+
+
 function decorateFooter($block) {
   if ($block?.children?.[3]) {
     const $footer = createTag('div', { class: 'puf-pricing-footer' });
@@ -464,7 +522,9 @@ export default function decorate($block) {
   updatePUFCarousel($block);
   addPublishDependencies('/express/system/offers-new.json');
   wrapTextAndSup($block);
-
-  $block.append($footer);
+  alignP($block);
   highlightText($block);
+  alignHighlights($block);
+
+  $block.append($footer);
 }