How to make two elements in a react project side by side-CodePudding

I am currently attempting to create a reactjs dashboard. Recently, I have been trying to add two toggle buttons to the dashboard toggling 'light mode' and 'dark mode'. I want these toggle buttons to sit side by side. However, they currently sit on top of each other which is not what I want. I have been reading around and found a simple way to do this is to add float: left; to the divs but this is not working for me.

Code (JSX):

return (
    <div className='parent'>

        <div className='toggleButtonDark'>
            <ToggleButton
                value="check"
                selected={selected}
                onChange={() => {
                setSelected(!selected);
                }}
            >
                <MdDarkMode />
                <h5>Dark Mode</h5>
            </ToggleButton>
        </div>

        <div className='toggleButtonLight'>
            <ToggleButton
            value="check"
            selected={selectedBright}
            onChange={() => {
            setSelectedBright(!selectedBright);
            }}
            >
                <BsFillBrightnessHighFill />
                <h5>Light Mode</h5>
            </ToggleButton>
        </div>
    </div>
  )

Code (CSS):

.toggleButtonDark, .toggleButtonLight {
    padding: 15px 15px;
    float: left;
}

In summary, I want the two buttons to sit side by side on the page and not underneath each other. Any suggestions would be much appreciated. Thanks in advance.

CodePudding user response：

You should remove the float from the buttons and give the parent display: flex.

Something like this:

.parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}