How can I do to put my select next to my switch?

Question

Hello I have this code using React.js :

import React, { Component } from 'react';
import Select from "./components/Select/Select";
import Switch from "./components/Switch/Switch";

class App extends Component {
  state = {
    Test : [
        {value : "0", name : "1"},
    ]
  }
    render() {
        return (
        <>
          <div className="form-inline">
          <div className="col-sm-9">
          <Select list={[...this.state.Test]}/>
          <Switch />
          </div>
          </div>
        </>
        );
}
} 

where Select.js :

import React from "react";

const selectoption = ({ list }) => (
    <select className="custom-select">{list.map(option => (<option key={option.value} value={option.value}>{option.name}</option>))}
</select>
);

export default selectoption;

And the last file Switch.js :

import React from "react";

const switchoption = () => (<div className="custom-control custom-switch">
<input type="checkbox" className="custom-control-input" id="customSwitch1" />
    <label className="custom-control-label" htmlFor="customSwitch1">Slot/Map</label>
</div>);

export default switchoption;

But the problem is that I don't have select next to the switch like I want.

[![My pic][1]][1]

Thank you very much ! [1]: https://i.stack.imgur.com/CSlRi.png

Answer 1

you just need to wrappe them both in flex container

class App extends Component {
  state = {
    Test : [
        {value : "0", name : "1"},
    ]
  }
    render() {
        return (
        <>
          <div className="form-inline">
             <div className="flex">
                 <Select list={[...this.state.Test]}/>
                 <Switch />
             < /div>
          </div>
        </>
        );
}
} 

in css

.flex{
display:flex;
width:100% ;
justify-content:space-between;
align-items:center;
}
.flex select {
 flex:1;
  display:inline;
}

Answer 2

You can use flexbox here. Similar to the code shown below. In case of React use className instead of class. Wrap the divs that should be next to each other in a parent class which has flex-direction of type row and each of the child classes should have flex-direction of type column. It is very similar to a table row layout.

This link is very helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .parent { display: flex; flex-direction: row width: 100%; } .child { display: flex; flex-direction: column; }

 <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> </div>