React components positioning - css

Question

I'm trying to position the react components and having hard time figuring out with CSS flexbox.
I have 3 react components as below
function App() {
return (
<>
<div className = "header">
<h1>Connect cruAMS and Security Center</h1>
</div>
<br></br>
<div className="App">
<Cruams />
<SecurityCenter />
<UserContainer />
</div>
</>
);
}
Currently it's location is like below.
Cruams SecurityCenter UserContainer
What I want is
Cruams SecurityCenter
UserContainer
How can I do this using CSS flexbox? Or is there a different way?
Thanks in advance!

Answer 1

If you don't want to make your css too complicated, a simple top margin can help you here:
.App {
display: flex;
justify-content: center;
}
.cruams {
display: inline-block;
}
.securityCenter{
display: inline-block;
margin-top: 20px;
}
.userContainer {
display: inline-block;
}
<div className = "header">
<h1>Connect cruAMS and Security Center</h1>
</div>
<br></br>
<div class="App">
<div class="cruams">cruams</div>
<div class="securityCenter">securityCenter</div>
<div class="userContainer">userContainer</div>
</div>

Answer 2

Without using any extra divs:
<div className="container">
<Cruams className="half-width" />
<SecurityCenter className="half-width"/>
<UserContainer className="full-width" />
</div>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.half-width {
flex-basis: 50%
}
.full-width {
flex-basis: 100%
}