title: How to align 2 cards side by side using Material UI in React, programmatically (after getting data from API])?
body: <p>I am getting data from an API and I have to display the received data in the form of cards, with two cards placed side by side. Currently, I am just mimicking it by using an array and passing them to the component programmatically and have attached the output image and my code below.</p>
  <p>I want to get two cards side by side. But getting them one below the other.</p>
  <p>Code sandbox link  is available <a href="https://codesandbox.io/s/sweet-buck-q36il?file=/src/App.js" rel="nofollow noreferrer">here</a></p>
  <p>Output I am getting is:
  <a href="https://i.stack.imgur.com/AYpnu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AYpnu.jpg" alt="Cards one below the other" /></a></p>
  <p>How can I get the output in such a way that there are two cards in a single row?</p>