fix pillars

app/globals.scss

@@ -196,6 +196,14 @@ li {
   flex-direction: row;
 }
 
+.flex-row-equal {
+  display: flex;
+  flex-direction: row;
+  > * {
+    flex: 1;
+  }
+}
+
 .flex-row-reverse {
   display: flex;
   flex-direction: row-reverse;

components/description/Pillars.js

@@ -5,7 +5,7 @@ import styled from "styled-components";
 const Pillar = styled.div`
   display: flex;
   flex: 1;
-  flex-direction: column;
+  flex-direction: row;
   text-align: center;
   justify-content: space-between;
 `;
@@ -29,6 +29,7 @@ const Black = styled.strong`
   -webkit-text-fill-color: transparent;
   -moz-background-clip: text;
   -moz-text-fill-color: transparent;
+  text-align: center;
 `;
 
 const Pillars = ({ alternate }) => {
@@ -65,8 +66,8 @@ const Pillars = ({ alternate }) => {
           </Pillar>
         </div>
 
-        <div className="flex-row">
-          <Pillar>
+        <div className="flex-col">
+          <div className="flex-row-equal" style={{ textAlign: "center" }}>
             {alternate ? (
               <Black>
                 <p>Protein Production Efficiency</p>
@@ -77,28 +78,16 @@ const Pillars = ({ alternate }) => {
               </White>
             )}
 
-            <p>
-              Employing rapid dividing <i>Vibrio natriegens</i> as a chassis for
-              cell free protein synthesis.
-            </p>
-          </Pillar>
-
-          <Pillar>
             {alternate ? (
               <Black>
-                <p>Energy Usage Efficiency</p>
+                <p>Energy Usage <br/>Efficiency</p>
               </Black>
             ) : (
               <White>
-                <p>Energy Usage Efficiency</p>
+                <p>Energy Usage <br/>Efficiency</p>
               </White>
             )}
-            <p>
-              Using oxidative phosphorylation instead of substrate level through
-              split inteins.
-            </p>
-          </Pillar>
-          <Pillar>
+
             {alternate ? (
               <Black>
                 <p>Protein Purification Efficiency</p>
@@ -108,9 +97,19 @@ const Pillars = ({ alternate }) => {
                 <p>Protein Purification Efficiency</p>
               </White>
             )}
+          </div>
 
+          <div className="flex-row-equal" style={{ textAlign: "center" }}>
+            <p style={{ padding: "10px" }}>
+              Employing rapid dividing <i>Vibrio natriegens</i> as a chassis for
+              cell free protein synthesis.
+            </p>
+            <p>
+              Using oxidative phosphorylation instead of substrate level through
+              split inteins.
+            </p>
             <p>Thiol-sensitive intein for affinity tag purification aid.</p>
-          </Pillar>
+          </div>
         </div>
       </div>
     </>