How to make a button float right in React? - reactjs

Question

I'm trying to get the Add Server button to move to the far right side of the screen. Since float:right does not exist in React, what's the best way to go about doing this?
I made a wrapper called serverNavButtonWrapper tried adding padding to the left but this seems a bit hacky. I also tried adding a wrapper around both h3 titles then did flex-grow: 1 but this didn't work and ending up squishing them into columns. I would appreciate your help!
<div className={classes.serverNav}>
<h3 className={classes.title}>Current Servers</h3>
<h3 className={classes.title}>All Servers</h3>
<div className={classes.serverNavButtonWrapper}>
<Button
className={classes.serverNavButton}
variant="outlined"
size="medium"
color="default"
>
<AddIcon /> Server
</Button>
</div>
</div>
preview of current render

Answer 1

If you set the margin to auto on a flex item, it will grow to the maximum available space. So the following will do the trick:
.serverNav {
display: flex;
}
.serverNavButtonWrapper {
margin-left: auto;
}
Or, if you don't need the wrapper anymore:
.serverNav {
display: flex;
}
.serverNavButton {
margin-left: auto;
}

Answer 2

The float property is primary the CSS property.
You can pass the stylesheet to the React components via the style attribute, e.g.:
<p style={{fontSize: "12px"}}>Text</div>
Two curly brackets are there because the argument type of style is an object and you are initializing it there.
So your code should look like this:
<div className={classes.serverNav}>
<h3 className={classes.title}>Current Servers</h3>
<h3 className={classes.title}>All Servers</h3>
<div className={classes.serverNavButtonWrapper}>
<Button
className={classes.serverNavButton}
variant="outlined"
size="medium"
color="default"
style={{float: "right"}}
>
<AddIcon /> Server
</Button>
</div>
</div>