diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
index 8be256b1..fcffeafc 100644
--- a/src/renderStatsCard.js
+++ b/src/renderStatsCard.js
@@ -1,12 +1,18 @@
 const { kFormatter, isValidHexColor } = require("../src/utils");
 
-const createTextNode = ({ icon, label, value, lineHeight, id }) => {
+const createTextNode = ({ icon, label, value, id, index, lineHeight }) => {
   const classname = icon === "★" && "star-icon";
   const kValue = kFormatter(value);
+  // manually calculating lineHeight based on index instead of using <tspan dy="" />
+  // to fix firefox layout bug
   return `
-    <tspan x="25" dy="${lineHeight}" class="stat bold">
-    <tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan>
-    <tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</tspan>
+    <text x="25" y="${lineHeight * (index + 1)}">
+      <tspan dx="0" data-testid="icon" class="icon ${classname}">${icon}</tspan>   
+      <tspan dx="0" class="stat bold">
+       ${label}:
+      </tspan>
+      <tspan x="160" data-testid="${id}" class="stat">${kValue}</tspan>
+    </text>
   `;
 };
 
@@ -41,47 +47,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
   const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
 
-  const STAT_MAP = {
-    stars: createTextNode({
+  const STATS = {
+    stars: {
       icon: "★",
       label: "Total Stars",
       value: totalStars,
-      lineHeight: lheight,
       id: "stars",
-    }),
-    commits: createTextNode({
+    },
+    commits: {
       icon: "🕗",
       label: "Total Commits",
       value: totalCommits,
-      lineHeight: lheight,
       id: "commits",
-    }),
-    prs: createTextNode({
+    },
+    prs: {
       icon: "🔀",
       label: "Total PRs",
       value: totalPRs,
-      lineHeight: lheight,
       id: "prs",
-    }),
-    issues: createTextNode({
+    },
+    issues: {
       icon: "ⓘ",
       label: "Total Issues",
       value: totalIssues,
-      lineHeight: lheight,
       id: "issues",
-    }),
-    contribs: createTextNode({
+    },
+    contribs: {
       icon: "📕",
       label: "Contributed to",
       value: contributedTo,
-      lineHeight: lheight,
       id: "contribs",
-    }),
+    },
   };
 
-  const statItems = Object.keys(STAT_MAP)
+  const statItems = Object.keys(STATS)
     .filter((key) => !hide.includes(key))
-    .map((key) => STAT_MAP[key]);
+    .map((key, index) =>
+      // create the text nodes, and pass index so that we can calculate the line spacing 
+      createTextNode({ ...STATS[key], index, lineHeight: lheight })
+    );
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
@@ -152,9 +156,10 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
       ${rankCircle}
       
       <text x="25" y="35" class="header">${name}'s GitHub Stats</text>
-      <text y="45">
+
+      <svg x="0" y="45">
         ${statItems.toString().replace(/\,/gm, "")}
-      </text>
+      </svg>
     </svg>
   `;
 };