How do I get two dropdowns side by side

Currently trying to put to drop downs side by side and center them, however, my current implementation floats one drop down to the right and the other one remains in the center. I used `display: inline-block". What other ways can I achieve this?

The two dropdowns are the components ListGroup and Dropdown

    class App extends React.Component<IProps> {
      public render() {
        return (
          <div className="maincenter">
            <h1>Selector</h1>
    
            <ToggleButtonGroup
            />
            {/* 
            <SearchForm
            /> */}
    
            <div
              style={{
                display: "inline-block"
              }}
            >
              <Dropdown
              />
    
              <ListGroup
              />
            </div>
          </div>
        );
      }
    }

1 answer

  • answered 2019-10-15 17:57 Ömürcan Cengiz

    You can create a const, giving the styles to it and set the style of div to that const.

    const divStyle = {
      display: flex;
      flex-direction: row;
      justify-content: center;
    };
    
    <div style={divStyle}>
          <Dropdown/>
    
          <ListGroup/>
    </div>