Pass style directly into ModuleHeading

src/components/pages/Timeline/components/ModuleHeading/index.tsx

-import React from "react";
+import React, { CSSProperties } from "react";
 import Card from "react-bootstrap/Card";
 import styles from "./style.module.scss";
 
 export interface ModuleHeadingprops {
   moduleCode: string;
   title: string;
+  style?: CSSProperties;
 }
 
-const ModuleHeading: React.FC<ModuleHeadingprops> = ({ moduleCode, title }) => {
+const ModuleHeading: React.FC<ModuleHeadingprops> = ({
+  moduleCode,
+  title,
+  style,
+}) => {
   return (
-    <Card className={styles.moduleCard}>
+    <Card style={style} className={styles.moduleCard}>
       <Card.Header>
         <span>{moduleCode}</span>
       </Card.Header>

src/components/pages/Timeline/index.tsx

@@ -33,7 +33,7 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
     this.props.initSideBar();
     let moduleTracks: ModuleTracks = {};
     modulesList.forEach(({ code }) => {
-			moduleTracks[code] = [[], []];			
+      moduleTracks[code] = [[], []];
     });
     this.setState({ moduleTracks: moduleTracks });
   }
@@ -62,13 +62,12 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
       const tracks = this.state.moduleTracks[code];
       if (tracks) {
         moduleHeadings.push(
-          <div
+          <ModuleHeading
             key={code}
-            className={styles.moduleHeading}
             style={{ height: `${tracks.length * trackHeight}rem` }}
-          >
-            <ModuleHeading moduleCode={code} title={modulesList[i].title} />
-          </div>
+            moduleCode={code}
+            title={modulesList[i].title}
+          />
         );
         const timelineBackgroundsClass = classNames(
           i % 2 === 0