Below is the code for components:

Card Component:

import "./Card.css";

function Card(props) {
  const classes =
    "card" +
    props.className; /* css classes of "ExpenseItem Component" and "Card component in "classes" */

  return <div className={classes}>{props.children}</div>;
}

export default Card;

ExpenseItem Component:

import ExpenseDate from "./ExpenseDate";
import Card from "./Card";
import "./ExpenseItem.css";

function ExpenseItem(props) {
  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} /> /*ExpenseDate component imported to show date from another component*/
      <div className="expense-item__description">
        <h2>{props.title}</h2>

        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card>
  );
}

export default ExpenseItem;

you went through the snippets above, now the problem i'm facing is that when I use the Card component in the ExpenseItem Component to wrap the component inside the Card JSX tags, it breaks the CSS and does not use the CSS classes i'm implementing by using the const classes variable in the Card component, but if I use the div instead of Card in ExpenseItem the component works fine. Below I'm attaching both the Screenshots as well..

With div tags:

With Card Tags: