[#694] Fix segment selector position on select goal section

Author: wayangalihpratama

frontend/src/pages/cases/components/ExploreChangeToCloseTheGap.js

@@ -14,7 +14,18 @@ const ExploreChangeToCloseTheGap = () => {
     <Row gutter={[24, 24]}>
       <Col span={24}>
         <Card className="card-content-wrapper select-the-goal-container">
-          <Row gutter={[20, 20]}>
+          <Row gutter={[20, 20]} align="bottom">
+            <Col span={24}>
+              <Row gutter={[20, 20]}>
+                <Col span={16}>
+                  <h4>Select the segment for which you want to explore.</h4>
+                  <SegmentSelector
+                    selectedSegment={selectedSegment}
+                    setSelectedSegment={setSelectedSegment}
+                  />
+                </Col>
+              </Row>
+            </Col>
             <Col span={16}>
               <h3>Select the Goal:</h3>
               <p>
@@ -31,17 +42,6 @@ const ExploreChangeToCloseTheGap = () => {
                 buttonView={true}
               />
             </Col>
-            <Col span={24}>
-              <Row gutter={[20, 20]}>
-                <Col span={16}>
-                  <p>Select the segment for which you want to explore.</p>
-                  <SegmentSelector
-                    selectedSegment={selectedSegment}
-                    setSelectedSegment={setSelectedSegment}
-                  />
-                </Col>
-              </Row>
-            </Col>
           </Row>
         </Card>
       </Col>

frontend/src/pages/cases/steps/steps.scss

@@ -761,9 +761,15 @@
       margin: 0;
       color: $primary-color;
       margin-bottom: 14px;
+      font-size: 16px;
     }
-    p {
+    p,
+    h4 {
       margin: 0;
+      font-weight: normal;
+    }
+    h4 {
+      margin-bottom: 8px;
     }
 
     .ant-space,