title: My lists are not displaying side by side or underneath the correct header
body: <p>I want json data to be parsed into a list and the list to have two headers with the corresponding lists underneath them. I want the lists to be placed side by side but the list is a running list. </p>
  
  <p>I have tried using ng-repeat on my ul classes and centering the text by using align with css but nothing is working. </p>
  
  <pre><code>const Header = () =&gt; {
    return (
      &lt;div&gt;
        &lt;h1 className="display-3"&gt; lists&lt;/h1&gt;
        &lt;br /&gt;
        &lt;div className="popularHeader"&gt;
          &lt;h1 className="display-4"&gt; Popular List &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div className="allHeader"&gt;
          &lt;h1 className="display-4"&gt; 2nd List &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Header;
  </code></pre>
  
  <p>I want two lists displayed side by side.</p>