Display:inline is not working

[Regmi]

My React Code

export default function Card(props) {
    return (
        <div className="card">
            <img src={`images/${props.location}.jpg`} alt="Location" className="card--image" />
            <div className="card--stats">
                <div className="google-location">
                    <a href={props.googleMapsUrl}><GoLocation /></a>
                    <p>{props.location} View on Google Maps</p>
                </div>

                <h2>{props.title}</h2>
                <strong>{props.startDate} - {props.endDate}</strong>
                <p className="desc">{props.description}</p>
            </div>



        </div>
    )

My CSS Code

.card{
    margin-top: 55px;
    margin-left: 40px;
    display: flex;
    
}

.card--image{
    width:125px;
    height:168px;
    object-fit: cover;

    border-radius: 5px;
    display: inline-block;
}

.card--stats{
    display: inline-block;
}

desc{
    position: absolute;
    width: 326px;
    height: 45px;
    left: 184px;
    top: 203px;
}

.google-location{
    display: inline;

}

The location icon and the location name are supposed to come side by side, but it is not working, and I can’t figure out why.

This is how they look now

[bbsmooth]

It would be much better if you gave us a link to your project so we can test it instead of having to try and recreate it ourselves from your pasted code.

[lasjorg]

If this is the icon…

<a href={props.googleMapsUrl}><GoLocation /></a>

…which it seems to be then nothing you have in the CSS will put it on the same line as the block-level p element.

<a href={props.googleMapsUrl}><GoLocation /></a>
<p>{props.location} View on Google Maps</p>

Setting the parent container to flex will put the children in a row.

.google-location{
  display: flex;
  align-items: center;
}