diff --git a/src/App.tsx b/src/App.tsx
index c6463448..374eed70 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,6 +27,7 @@ import {
   Switch,
   Tabs,
   WarningAlert,
+  CardPrimary,
 } from "@/components";
 
 const App = () => {
@@ -128,15 +129,44 @@ const App = () => {
           state={"disabled"}
         ></Badge>
       </div>
-      <CardSecondary
-        title="Card title"
-        icon="building"
-        description="This is a card description"
-        badgeText="experiment"
-        infoText="Read More"
-        infoUrl="#"
-      />
+      <div style={{ display: "flex", padding: "1rem" }}>
+        <CardSecondary
+          title="Card title"
+          icon="building"
+          description="This is a card description"
+          badgeText="experiment"
+          infoText="Read More"
+          infoUrl="#"
+        />
+
+        <CardSecondary
+          title="Card title"
+          icon="building"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sagittis neque. Quisque ut nunc tortor. Donec ut faucibus neque. In vel suscipit nunc. Praesent odio velit, sollicitudin ac tempor a, varius vitae turpis. Donec mauris risus, dapibus a justo eu, ultricies ullamcorper lacus. Sed ligula purus, sodales quis arcu sit amet, tempor dignissim velit. In ullamcorper lectus non rutrum bibendum. Etiam velit dolor, hendrerit vitae tristique a, semper vitae est. Vivamus elit justo, pellentesque eu auctor feugiat, ultrices vitae diam. Donec accumsan tortor nec vestibulum lobortis. Proin mattis quam nisl, sed malesuada diam volutpat a."
+          badgeText="experiment"
+          infoText="Read More"
+          infoUrl="#"
+        />
+      </div>
+      <div style={{ display: "flex", padding: "1rem" }}>
+        <CardPrimary
+          title="Card title"
+          icon="building"
+          description="This is a card description"
+          infoText="Read More"
+          infoUrl="#"
+          style={{ display: "flex", width: "100%" }}
+        />
 
+        <CardPrimary
+          title="Card title"
+          icon="building"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sagittis neque. Quisque ut nunc tortor. Donec ut faucibus neque. In vel suscipit nunc. Praesent odio velit, sollicitudin ac tempor a, varius vitae turpis. Donec mauris risus, dapibus a justo eu, ultricies ullamcorper lacus. Sed ligula purus, sodales quis arcu sit amet, tempor dignissim velit. In ullamcorper lectus non rutrum bibendum. Etiam velit dolor, hendrerit vitae tristique a, semper vitae est. Vivamus elit justo, pellentesque eu auctor feugiat, ultrices vitae diam. Donec accumsan tortor nec vestibulum lobortis. Proin mattis quam nisl, sed malesuada diam volutpat a."
+          infoText="Read More"
+          infoUrl="#"
+          style={{ display: "flex", width: "100%" }}
+        />
+      </div>
       <ButtonGroup
         labels={["Left center", "Center", "Center", "Center", "Right end"]}
         activeIndex={selectedButton}
diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx
index 63583dce..7fa6d167 100644
--- a/src/components/CardPrimary/CardPrimary.tsx
+++ b/src/components/CardPrimary/CardPrimary.tsx
@@ -99,6 +99,17 @@ const Content = styled.div<{ $size?: "sm" | "md" }>`
   flex-direction: column;
   align-self: center;
   gap: ${({ $size = "md", theme }) => theme.click.card.primary.space[$size].gap};
+  flex: 1;
+`;
+
+const ContentContainer = styled.div<{ $size?: "sm" | "md" }>`
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  gap: ${({ $size = "md", theme }) => theme.click.card.primary.space[$size].gap};
 `;
 
 export const CardPrimary = ({
@@ -141,20 +152,22 @@ export const CardPrimary = ({
         <Title type="h3">{title}</Title>
       </Header>
 
-      <Content $size={size}>
-        <Text color="muted">{description}</Text>
-      </Content>
+      <ContentContainer>
+        <Content $size={size}>
+          <Text color="muted">{description}</Text>
+        </Content>
 
-      {size == "sm" && <Spacer size="sm" />}
+        {size == "sm" && <Spacer size="sm" />}
 
-      {infoText && (
-        <Component
-          onClick={handleClick}
-          disabled={disabled}
-        >
-          {infoText}
-        </Component>
-      )}
+        {infoText && (
+          <Component
+            onClick={handleClick}
+            disabled={disabled}
+          >
+            {infoText}
+          </Component>
+        )}
+      </ContentContainer>
     </Wrapper>
   );
 };
diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
index b6bc13d1..57f7257b 100644
--- a/src/components/CardSecondary/CardSecondary.tsx
+++ b/src/components/CardSecondary/CardSecondary.tsx
@@ -47,6 +47,7 @@ const HeaderLeft = styled.div<{ $disabled?: boolean }>`
 const Content = styled.div`
   display: flex;
   flex-direction: column;
+  flex: 1;
 `;
 
 const InfoLink = styled.a`