add style to results component

src/PhonoChangeApplier.scss

@@ -13,6 +13,12 @@ div.App {
     padding: 0.5em 0;
   }
 
+  h5 {
+    font-size: 1.1em;
+    padding: 0.1em 0;
+    font-weight: 800;
+  }
+
   div.PhonoChangeApplier {
     display: grid;
     width: 100%;

src/components/Output.js

@@ -27,7 +27,7 @@ const Output = props => {
     <div className="Output" data-testid="Output">
       <h3>Results of Run</h3>
 
-      <div data-testid="Output-lexicon" className="Output_container">
+      <div data-testid="Output-lexicon" className="Output__container">
         {results && results.length ? renderResults() : <></>}
       </div>
     </div>

src/components/Output.scss

@@ -1,6 +1,18 @@
-div.Output-epoch {
+div.Output {
-  display: flex;
+
-  p.lexicon {
+  div.Output__container {
     display: flex;
+    flex-flow: row wrap;
   }
+
+  div.Output-epoch {
+    display: flex;
+    flex-flow: column;
+
+    p.lexicon {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
+    }
+  }
+
 }