Show two list item side by side in a row

Question

I am using React 15 to generate two lists from two separate components. I want the list to be aligned side by side. Something like this

But what I'm getting is

Now the problem is

• These are two separate components and I can't merge them in a single one
• In React 15 there should be always one parent wrapper element hence I can't wrap both lists in a single ul.
• There are going to be two ul elements which are block elements hence the second ul will start from the next line.

Is there any React or CSS solution for it?

Any help will be appreciated. Codesandbox link

let List1 = function() {
  return (
    <ul className="list1">
      <li>List1</li>
      <li>List2</li>
      <li>List3</li>
      <li>List4</li>
      <li>List5</li>
    </ul>
  );
};

let List2 = function() {
  return (
    <ul className="list2">
      <li>List6</li>
      <li>List7</li>
      <li>List8</li>
      <li>List9</li>
      <li>List10</li>
    </ul>
  );
};
class App extends React.Component {
  render() {
    return (
      <div>
        <List1 />
        <List2 />
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

 <div id="root"></div>

Answer 1

It's a bit hacky, but you can change the ULs to display: inline.

let List1 = function() {
  return (
    <ul className="list1">
      <li>List1</li>
      <li>List2</li>
      <li>List3</li>
      <li>List4</li>
      <li>List5</li>
    </ul>
  );
};

let List2 = function() {
  return (
    <ul className="list2">
      <li>List6</li>
      <li>List7</li>
      <li>List8</li>
      <li>List9</li>
      <li>List10</li>
    </ul>
  );
};
class App extends React.Component {
  render() {
    return (
      <div>
        <List1 />
        <List2 />
      </div>
    );
  }
}
ReactDOM.render(<App />, root);

.App {
  font-family: sans-serif;
  text-align: center;
}
ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

 <div id="root"></div>