Materialize Cards not displaying properly in React app

Question

I am having Issues with Materialize cards in react I want them to display side by side and instead they are displaying vertically one on top of the other. Any help would be much appreciated.

 {this.state.players.length ? (
        <Row className="basketball-BG">
    <Col m={3}>
        <div className="card-content">

                <PlayersList>
                    {this.state.players.map(player => (
                        <PlayersInfo key={player._id}>

                                <Card className="card small'"
                                      header={<CardTitle ></CardTitle>}>
                                    <a className="player-card" href={"/players/" + player._id}>
                                    <div className="card-content">
                                        <h4>
                                            {player.lName +" "}
                                            {player.fName}
                                        </h4>
                                        <p>
                                            {player.jersey}
                                        </p>
                                        <p>
                                            {player.position}
                                        </p>
                                    </div>
                                    </a>
                                    <DeleteBtn onClick={() => this.deletePlayer(player._id)} />
                                </Card>



                        </PlayersInfo>
                    ))}
                </PlayersList>

        </div>
    </Col>
        </Row>
    ) : (
        <h3 className="center">You Dont Have any Players yet Add them to the roster</h3>
    )}

Answer 1

You can use flex layouts

// in your component
<PlayersList class='row-wise-spread'>
</PlayersList>

In a css file

.row-wise-spread {
  display: flex;
  flex-direction: row;
}