React - checkbox and data cannot be included in the same row

I want to put the checkbox and data in the same row(left and right respectively. However, I tried different ways to manage the layout but not successful.

The actual result:

The yellow area is dropdownHeader. Green area is dropdownCell Blue area is dropdownData

Please help. I am a beginner of React.

SelectUserDialog.js

import ...

const notificaionStyle = makeStyles(theme => ({
 dropdownSection:{
   marginTop: '30px',
   justifyContent:'center',
   alignItems: 'center',
},
dropdownHeader:{
   display: 'flex',
   alignItems: 'flex-start',
   height: '50px',
   width: '342.078px',
   borderBottom: '1px solid black',
   backgroundColor: "yellow",
   position: 'relative',
   margin: 'auto',
  
} ,
dropdownList:{
   display: 'block',
   backgroundColor: "red",
   width: '342.078px',
   position: 'relative',
},
dropdownItem:{
   width: '100%',
   backgroundColor: 'green',
   borderBottom: '1px solid black',
   paddingLeft: '10px',
},
 dropdownCheckbox:{
   display: 'inline',
   width: '20px',
   height: '20px',
   backgroundColor: 'pink',
   float:"left",
  
},
dropdownData:{
   display: 'inline',
   width: '50%',
   backgroundColor: 'blue',
}


function SelectUserDialog(props) {
   const classes = notificaionStyle();

   const [openDropDown,setOpenDropdown] = useState(false)
   const [elderlyHomeDetail, setElderlyHomeDetail] = useState([]);


   async function fetchElderlyHomes() {
       const response = await APIHelper.getElderlyHomeList({ '$limit': -1 });
       if (response.status >= 400) {
           sessionStorage.clear();
           window.location.reload(false);
       }
       if (response.status < 400) {

           setElderlyHomeDetail(response.data);
       }
   }

   
   const selectedCheckboxes = new Set();

   const toggleCheckbox = label => {
       console.log(label);
       if (selectedCheckboxes.has(label)) {
         selectedCheckboxes.delete(label);
       } else {
         selectedCheckboxes.add(label);
       }
     }

     const createCheckbox = label => (
      
       <CustomizedCheckbox
               label={label}
               handleCheckboxChange={toggleCheckbox}
               key={label}
           />
     )

     return (

       ...
       <Grid container direction='column' spacing={5} className={classes.dropdownSection}>
                   <div className={classes.dropdownHeader}>
                               <Button onClick={(openDropdown) =>           setOpenDropdown(!openDropDown)}>
                                   <img src = {dropdownButtonPhoto} alt = "dropdownbutton" height={35}/>
                               </Button>
                   </div>
                {   openDropDown ?
                   <div className={classes.dropdownList}>
                   { elderlyHomeDetail?
                       elderlyHomeDetail.map( data =>(

                           <div className={classes.dropdownItem}>
                                {createCheckbox(data.name_en)}
                              <span className={classes.dropdownData}>{data.name_en}</span>
                             
                           </div>                      
                       ))
                       : ''
                   }
                   </div>
                   : ''
                    
                }
       </Grid>
         

     )

CustomizedCheckbox.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class CustomizedCheckbox extends Component {
 state = {
   isChecked: false,
 }

 toggleCheckboxChange = () => {
   const { handleCheckboxChange, label } = this.props;

   this.setState(({ isChecked }) => (
   {
       isChecked: !isChecked,
   }
 ));

     handleCheckboxChange(label);
}

render() {
  const { label } = this.props;
  const { isChecked } = this.state;

  return (
    <div className="checkbox">
      <label>
        <input
                         style=
                       type="checkbox"
                       value={label}
                       checked={isChecked}
                       onChange={this.toggleCheckboxChange}
        />

     {/* {label} */}
   </label>
 </div>
  );
}
  }

 CustomizedCheckbox.propTypes = {
   label: PropTypes.string.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
  };

  export default CustomizedCheckbox;