Flexbox can't use 'justify-content' horizontally in Reactive.js - reactjs

Question

I need some help with flexbox. I'm not able to evenly distribute all components in a row with 'justify-content' - the components only stay in a column. It seems that React does not consider the 2 components that were generated from props - it treats all as just one component.
App.js
const App=()=> {
return(
<>
<Header />
<div className="containerHeader">
<h1>RECEIVE THE BEST DENTAL TREATMENT TO AVOID CROOKED-TEETH PROBLEM</h1>
<h2>We will give you the accurate assessment to find out which braces best suit you.</h2>
</div>
{Data.map((values)=>{
return(
<>
<Meeting
key={values.id}
imgsrc={values.imgsrc}
text={values.text}
/>
</>
)
})}
</>
);
};
Meeting.js
const Meeting=(props)=> {
return(
<div className="containerMeeting">
<div className="containerCard">
<img src={props.imgsrc} alt="Girl" />
<p>{props.text}</p>
</div>
</div>
);
};
Meeting.css
.containerMeeting {
padding: 0px 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
MeetingData.js
const Data=[
{
id:1,
imgsrc:"../Images/1.jpg ",
text:"Well-aligned teeth and fresher breath always leave a good impression when meeting a person for the first time."
},
{
id:2,
imgsrc:"../Images/2.jpg ",
text:"Even in a job interview your smile can lead to a favourable situation"
}
]
export default Data;
I hope that React considers the 2 components and distribute them horizontally.

Answer 1

"It seems that React does not consider the 2 components that were generated from props", there is only one containerCardelement inside the containerMeeting element. Thus nothing to align in a row.
When you map over Data what it will return will look like this
<div className="containerMeeting">
<div className="containerCard">
<img src="../Images/1.jpg " alt="Girl" />
<p>Well-aligned teeth and fresher breath always leave a good impression when meeting a person for the first time.</p>
</div>
</div>
<div className="containerMeeting">
<div className="containerCard">
<img src="../Images/2.jpg " alt="Girl" />
<p>Even in a job interview your smile can lead to a favourable situation</p>
</div>
</div>
If you want to make your containerCard elements appear in a row you should move the containerMeeting element out of the Meeting component and use it to surround Data.map
const Meeting = (props) => {
return (
<div className="containerCard">
<img src={props.imgsrc} alt="Girl" />
<p>{props.text}</p>
</div>
);
};
<div className="containerMeeting">
{Data.map((values) => {
return (
<Meeting key={values.id} imgsrc={values.imgsrc} text={values.text} />
);
})}
</div>