title: How to place Angular components side by side in web app
body: <p>I'm trying to create a Web-app using Angular where a user can play a card game. A list of possible players should be depicted on the left, and the playing table should be to the right of the players list.</p>
  <p><a href="https://i.stack.imgur.com/dWz00.png" rel="nofollow noreferrer">Example of desired layout</a></p>
  <p>However, since I'm using Angular and the players list and the playing table are different components, first the players list is shown and below that the playing table is located. <a href="https://i.stack.imgur.com/kLpl6.jpg" rel="nofollow noreferrer">What it looks like now</a></p>
  <p>My app.components.html looks like this:</p>
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;app-pippelaars&gt;&lt;/app-pippelaars&gt; &lt;!--component displaying available players--&gt;
  &lt;app-playing-table&gt;&lt;/app-playing-table&gt; &lt;!--component displaying playing table--&gt;
  </code></pre>
  <p>How do I get these components to be next to each other in the web app instead of one above the other?</p>