Aligning components and buttons within components - html

Question

I have two React Components, Open and Save. The Save component contains an saveButton. The Open component contains an openButton, along with a stopButton and executeButton that shows up depending on the state of the component. I want my Open and Save components to be lined up next to each other, on the same row:
<div style={{display:'flex', flexDirection:'row}}>
<Save></Save>
<Open></Open>
</div>
The initial state looks like this:
The state where all four buttons show look like this:
Remember that Execute and Stop are part of the same Open component that contains the Open button. How can I align the components so that the Save/Open buttons are aligned all the way to the left, and the Execute/Stop buttons are aligned all the way to the right?
For clarification, I want the buttons formatted like this:
Save Open ------------all whitespace here--------------- Execute Stop
Edit: Here is the (very simplified) code for the components
// Save
<Button>Save</Button>
//Open
this.state = { executeFlag: false, stopFlag: false}
render(){
let stop;
let execute;
if(this.state.stopFlag) stopButton = <Button>Stop</Button>;
if(this.state.executeFlag) executeButton = <Button>Execute</Button>;
return(
<div>
<Button>Open</Button>{execute}{stop}
</div>
);
}

Answer 1

In your css maybe you could try setting the width of the buttons to 50% each and margin to zero. I believe flex will display on the same row as long as they can fit.

Answer 2

There are a few ways to do that... It really depends on the structure of your component and not just the control buttons. Here is a sample structure I usually use for something similar in plain HTML CSS for your reference
.container {
display: flex;
}
.component-b {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.sub-menu{
display: flex;
justofy-content: flex-end;
}
.button {
background: #1E88E5;
padding: 0.5rem 1rem;
margin: 0.5rem;
}
<div class="container">
<div class="component-a button">
Save
</div>
<div class="component-b">
<div class="button">
Open
</div>
<div class="sub-menu">
<div class="button">
Execute
</div>
<div class="button">
Stop
</div>
</div>
</div>
</div>

Answer 3

One way of achieving this is by wrapping two components set in one div and then wrapping all in div and using flex properties
<div style={{
display:'flex'
justifyContent:'space-between',
aligItems:'center'
}}
>
<div style={{display:'flex', flexDirection:'row',justifyConetent:'space-around'}}>
<Save></Save>
<Open></Open>
</div>
<div style={{display:'flex', flexDirection:'row',justifyConetent:'space-around'}}>
<Execute></Execute>
<Stop></Stop>
</div>
</div>