Change align prop

components/CenterComponentWrapper.module.css

@@ -8,15 +8,12 @@
   padding: 0 15%;
 }
 
+.graphWrapper {
+  margin-top: calc(50rem / 16);
+}
 
 @media screen and (max-width: 768px) {
   .wrapper {
     padding: 0 calc(20rem / 16);
   }
 }
-
-
-
-.graphWrapper {
-  margin-top: calc(50rem / 16);
-}

components/SideComponentWrapper.tsx

@@ -6,7 +6,7 @@ type ComponentWrapperProps = {
   children: React.ReactNode;
   heading: string;
   body: string;
-  rightAligned?: boolean;
+  align?: "left" | "right";
   noBackground?: boolean;
 };
 
@@ -14,14 +14,14 @@ export function SideComponentWrapper({
   heading,
   body,
   children,
-  rightAligned = false,
+  align = "left",
   noBackground = false,
 }: ComponentWrapperProps) {
   return (
     <div
-      className={`${rightAligned ? styles.wrapperRight : styles.wrapperLeft} ${
+      className={`${
-        noBackground ? styles.noBackground : ""
+        align === "right" ? styles.wrapperRight : styles.wrapperLeft
-      }`}
+      } ${noBackground ? styles.noBackground : ""}`}
     >
       <div className={styles.internalWrapper}>
         <h3>{heading}</h3>

pages/samplePage.tsx

@@ -53,7 +53,7 @@ export default function SamplePage() {
       <SideComponentWrapper
         heading="What program are you in?"
         body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-        rightAligned
+        align="right"
       >
         <BarGraphHorizontal
           className={styles.barGraphDemo}
@@ -91,7 +91,6 @@ export default function SamplePage() {
       <SideComponentWrapper
         heading="What program are you in?"
         body="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-        rightAligned
       >
         <BarGraphHorizontal
           className={styles.barGraphDemo}