diff --git a/src/components/feedback/__tests__/__snapshots__/category-confusing.test.js.snap b/src/components/feedback/__tests__/__snapshots__/category-confusing.test.js.snap
index 484b0415a..65f5d7d78 100644
--- a/src/components/feedback/__tests__/__snapshots__/category-confusing.test.js.snap
+++ b/src/components/feedback/__tests__/__snapshots__/category-confusing.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow 3 - Enter feedback Cannot submit feedback yet 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               Something is confusing
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow 3 - Enter feedback Cannot submit feedback yet 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryConfusing
               option="What about this page is confusing? How can we improve the content?"
@@ -233,7 +231,7 @@ exports[`Workflow 3 - Enter feedback Cannot submit feedback yet 1`] = `
             </CategoryConfusing>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              
diff --git a/src/components/feedback/__tests__/__snapshots__/category-like.test.js.snap b/src/components/feedback/__tests__/__snapshots__/category-like.test.js.snap
index 8c858c964..0a73b228d 100644
--- a/src/components/feedback/__tests__/__snapshots__/category-like.test.js.snap
+++ b/src/components/feedback/__tests__/__snapshots__/category-like.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow 2 - I like this page Check UI element state 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               I like this page
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow 2 - I like this page Check UI element state 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryLike
               leadText="Tell us what you like about this page."
diff --git a/src/components/feedback/__tests__/__snapshots__/category-problem.test.js.snap b/src/components/feedback/__tests__/__snapshots__/category-problem.test.js.snap
index 9979a29fd..f5e21be15 100644
--- a/src/components/feedback/__tests__/__snapshots__/category-problem.test.js.snap
+++ b/src/components/feedback/__tests__/__snapshots__/category-problem.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow 2 - Report a problem Check UI element state 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               Report a problem
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow 2 - Report a problem Check UI element state 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryProblem
               leadText="Tell us more about what's happening."
@@ -295,7 +293,7 @@ exports[`Workflow 2 - Report a problem Check UI element state 1`] = `
             </CategoryProblem>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              
diff --git a/src/components/feedback/__tests__/__snapshots__/confirmation.test.js.snap b/src/components/feedback/__tests__/__snapshots__/confirmation.test.js.snap
index 1ebac491c..101f05235 100644
--- a/src/components/feedback/__tests__/__snapshots__/confirmation.test.js.snap
+++ b/src/components/feedback/__tests__/__snapshots__/confirmation.test.js.snap
@@ -26,17 +26,15 @@ exports[`Generate snapshot for feedback confirmation 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             />
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -135,7 +133,7 @@ exports[`Generate snapshot for feedback confirmation 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <div
               className="align-center prose relative"
diff --git a/src/components/feedback/__tests__/__snapshots__/contact-support.test.js.snap b/src/components/feedback/__tests__/__snapshots__/contact-support.test.js.snap
index 2b0fbd4bc..0f29eeae4 100644
--- a/src/components/feedback/__tests__/__snapshots__/contact-support.test.js.snap
+++ b/src/components/feedback/__tests__/__snapshots__/contact-support.test.js.snap
@@ -28,19 +28,17 @@ exports[`Workflow 2 - Contact support Click button, then set state 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               Share your feedback
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -139,7 +137,7 @@ exports[`Workflow 2 - Contact support Click button, then set state 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <button
               className="btn w-full mb6"
@@ -167,7 +165,7 @@ exports[`Workflow 2 - Contact support Click button, then set state 1`] = `
             </button>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              
diff --git a/src/components/feedback/__tests__/__snapshots__/logged-in.test.js.snap b/src/components/feedback/__tests__/__snapshots__/logged-in.test.js.snap
index 8ee7a2852..29791c28b 100644
--- a/src/components/feedback/__tests__/__snapshots__/logged-in.test.js.snap
+++ b/src/components/feedback/__tests__/__snapshots__/logged-in.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow with logged in user information 2 - Something is confusing Che
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               Something is confusing
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow with logged in user information 2 - Something is confusing Che
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryConfusing
               option="What about this page is confusing? How can we improve the content?"
@@ -233,7 +231,7 @@ exports[`Workflow with logged in user information 2 - Something is confusing Che
             </CategoryConfusing>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              
diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
index aca02fe7c..b99e6b309 100644
--- a/src/components/feedback/feedback.js
+++ b/src/components/feedback/feedback.js
@@ -131,10 +131,10 @@ class Feedback extends React.PureComponent {
     return (
       <div className="dr-ui--feedback wmax300">
         <div className="bg-gray-faint round py12 px12">
-          <div className="flex-parent flex-parent--column">
-            <div className="flex-child flex-parent flex-parent--space-between-main w-full mb12">
-              <div className="flex-child txt-bold">{title}</div>
-              <div className="flex-child">
+          <div className="flex flex--column">
+            <div className="flex flex--space-between-main w-full mb12">
+              <div className="txt-bold">{title}</div>
+              <div>
                 <Tooltip content="Close">
                   <button
                     id="feedback-close-button"
@@ -147,9 +147,9 @@ class Feedback extends React.PureComponent {
                 </Tooltip>
               </div>
             </div>
-            <div className="flex-child mb6 prose">{children}</div>
+            <div className="mb6 prose">{children}</div>
             {showContactSupport && (
-              <div className="flex-child color-gray">
+              <div className="color-text">
                 Need help?{' '}
                 <button
                   className="link"