how to line up elements in React using CSS

Question

I'm trying to space out elements inside a Card evenly, but they are not lined-up:

here's the code:

<div className="card">
    <header className="card-header">
        <div className="card-header-info">
            <p>{`#${driver.driverId}`}</p>
            <h1>{driver.name}</h1>
        </div>
        <div className="card-header-info">
            <p>VEHICLE</p>
            <p>{driver.vehicleId}</p>
        </div>
        <div className="card-header-info">
            <p>HOMETOWN</p>
            <p>{driver.hometown}</p>
        </div>
    </header>
</div>

CSS

.card-header-info {
    padding-left: 20px;
    margin-right: auto;
}

I have also tried Bulma (CSS framework) columns but got nothing. Anyone know a slick technique that would achieve this goal while at the same time making the space relative to the size of the Card? I would appreciate any help.

Can you provide the rendered HTML? Better still provide a minimal reproducible example. I would also consider removing the header wrapper and use CSS Grid — Jon P
– Jon P, Commented Jul 14, 2022 at 3:42

CodeoftheWarrior · Accepted Answer · 2022-07-14 04:29:36Z

2

I recommend the following for the header element using css grid:

.card-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

answered Jul 14, 2022 at 4:29

CodeoftheWarrior

3733 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to line up elements in React using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related