CODEWITHSUNDEEP
htmlcssreactjs
csPYTHONcs
csPYTHONcs

Reputation: 187

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

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.

Upvotes: 0

Views: 89

Answers (1)

Boguz
Boguz

Reputation: 1823

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;
}

Upvotes: 1

Related Questions