More css tweaks

App.jsx

@@ -26,9 +26,10 @@ function Entry(props) {
     <div className="searchResult" key={ entry.id }>
       <b>{ entry.sai }</b> - { entry.eng }
       <br />
-      <span className="synclass">{ entry.syn_category }</span>
+      <span className="synclass">
-      <br />
+        <i>{ entry.syn_category }</i>
-      Type: { entry.morph_type }
+        { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+      </span>
     </div>
   );
 }
@@ -105,12 +106,12 @@ class App extends Component {
             <button onClick={ this.searchSaimiar } className="searchButton">Saimiar</button>
             <button onClick={ this.searchEng } className="searchButton">English</button>
           </div>
+          <Results
+            searchResults={ this.state.searchResults }
+            searchTerm= { this.state.searchTerm }
+            searchType={ this.state.searchType }
+          />
         </div>
-        <Results
-          searchResults={ this.state.searchResults }
-          searchTerm= { this.state.searchTerm }
-          searchType={ this.state.searchType }
-        />
       </main>
     );
   }

App.scss

@@ -1,9 +1,10 @@
 body {
     background-color: #f0f0b8;
+    font-size: 14pt;
 }
 
 main {
-    text-align:center;
+    text-align: center;
 }
 
 div .container {
@@ -11,6 +12,10 @@ div .container {
     margin: auto;
 }
 
+div .results {
+    text-align: left;
+}
+
 div .textInput {
     max-width: 70%;
     margin: auto;
@@ -26,3 +31,16 @@ input {
     margin: 10px;
     font-dize: 22px;
 }
+
+.searchResult {
+    border-bottom: 1px solid #b2a336;
+    padding: 5px;
+}
+
+.synclass {
+    color: #a63333;
+    i {
+        margin-right: 10px;
+
+    }
+}