Although I know there are countless identical questions out there, mine lacks context and is as generic as they come. Why isn't the flex-direction row property working?
React View
return (
<Fragment>
<h1>The About us page.</h1>
<Fragment className="container">
<p>Dog</p>
<p>Cat</p>
<p>Other Dog</p>
</Fragment>
</Fragment>
);
CSS
.container{
display: flex;
flex-direction: row;
}
Despite setting the flex-direction: row; property in the CSS, the result shows those 3 <p> tags stacked vertically. I would include a screenshot but technical difficulties prevent me from doing so. The desired outcome is to have "Cat", "Dog", and "Other dog" displayed in a single row instead of individual columns.
From all the sources I've consulted online, it seems like the CSS syntax should be correct: https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
Can anyone identify what might be the issue?