How to render the cards side by side (horizontally) rather than vertically in react?

Question

I want to display the cards side by side but the cards are being displayed vertically.

The cards are coming one below the other. I want them side by side.

Here's the code

App.jsx

import React from "react";
import Card from "./Card";
import content from "./content";

function createEntry(entry) {
  return <Card key={entry.id} emoji={entry.emoji} back={entry.back} />;
}

function App() {
  return (
    <div>
      <h1>
        <span>Heading</span>
      </h1>
      {content.map(createEntry)}
    </div>
  );
}

export default App;

Card.jsx

import React from "react";
import ReactCardFlip from "react-card-flip";

const CardStyle = {
  border: "1px solid #03506f",
  borderRadius: "30px",
  padding: "20px",
  margin: "20px",
  width: "270px",
  height: "170px",
  backgroundColor: "#75cfb8"
};

function Card(props) {
  const [isFlipped, setFlipped] = React.useState(false);

  return (
    <ReactCardFlip isFlipped={isFlipped} flipDirection="vertical">
      <div
        style={CardStyle}
        className="CardFront"
        onClick={() => setFlipped((prev) => !prev)}
      >
        <div>
          <span className="emoji" role="img" aria-label="emojis">
            {props.emoji}
          </span>
        </div>
      </div>
      <div
        style={CardStyle}
        onClick={() => setFlipped((prev) => !prev)}
        className="CardBack"
      >
        <p>{props.back}</p>
      </div>
    </ReactCardFlip>
  );
}

export default Card;

content.js

const content = [
  {
    id: 1,
    emoji: "😅",
    back:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor orci eu lobortis elementum nibh tellus."
  },
  {
    id: 2,
    emoji: "🤩",
    back:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor orci eu lobortis elementum nibh tellus."
  },
  {
    id: 3,
    emoji: "😛",
    back:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor orci eu lobortis elementum nibh tellus."
  }
];

export default content;

I am just a beginner to React and still in the process. Please suggest what needs to be done to fix this. Any help would be greatly appreciated.

Answer 1

By using CSS flex:

function App() {
  return (
    <div>
      <h1>
        <span>Heading</span>
      </h1>

      <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
         {content.map(createEntry)}
      </div>
    
    </div>
  );
}

Answer 2

You can use wrap property in CSS flexbox to make it responsive for small screens

function App() {
  return (
    <div>
      <h1>
        <span>Heading</span>
      </h1>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {content.map(createEntry)}
      </div>
    </div>
  );
}

Answer 3

You have to wrap the card function in app.jsx. You can use flex

<div style={{ display: 'flex' }} >
   {content.map(createEntry)}
</div>

or

add the css to card div display: inline