diff --git a/app/web/components/LabelAndText.tsx b/app/web/components/LabelAndText.tsx
index 37f6ba4926..b963608a5f 100644
--- a/app/web/components/LabelAndText.tsx
+++ b/app/web/components/LabelAndText.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     marginTop: theme.spacing(0.5),
+    alignItems: "flex-start", // Ensures the label aligns with the top of multi-line text
   },
   flexItem: {
     flex: "1 1 50%",
diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
index 8d29a953e9..47aa7dedad 100644
--- a/app/web/features/profile/view/userLabels.tsx
+++ b/app/web/features/profile/view/userLabels.tsx
@@ -107,6 +107,11 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(0.5),
     alignSelf: "center",
   },
+  container: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+  },
 }));
 
 const AgeAndGenderRenderer = ({ user }: Props) => {
@@ -180,13 +185,14 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
     }
   };
   return (
-    <>
+    <div className={useStyles().container}>
       <span>{age}</span>
-      {getBirthdateVerificationIcon(birthdateVerificationStatus)} /&nbsp;
+      {getBirthdateVerificationIcon(birthdateVerificationStatus)}
+      <span>/&nbsp;</span>
       <span>{gender}</span>
       {getGenderVerificationIcon(genderVerificationStatus)}
-      <span> {pronouns && ` (${pronouns})`}</span>
-    </>
+      {pronouns && <span>({pronouns.replace(/\s+/g, "")})</span>}
+    </div>
   );
 };
 
@@ -248,3 +254,4 @@ export const RemainingAboutLabels = ({ user }: Props) => {
     </>
   );
 };
+