Material-UI Список бок о бок ListItem в ReactJS

Question

Я хочу, чтобы мой ListItem для материала был рядом при отображении, но у меня возникают трудности с достижением этого.

флажок и ListItem должны быть рядом. Я попытался поместить ListItem в ListItemSecondaryAction, и он тоже не работает.

Вот мой метод рендеринга

render() {
return (
  <div style={{ padding: "0px"}}>
    <div style={{ padding: "0px" }}>
      <List>
      {this.state.routeList.map((row, index) => (
        <ListItem style={{backgroundColor:'white'}}>
          <ListItemIcon>
            <Checkbox
              edge="start"
              checked={this.state.routeList[index].isSelected}
              tabIndex={-1}
              disableRipple
              inputProps={{ 'aria-labelledby': this.state.routeList[index].RouteId }}
              onClick={() => this.handleClickCheckbox(index)}
            />  
          </ListItemIcon>
          <ListItemText 
              primary={row.Description} 
              secondary={
                <div>
                  <div>
                    {"Direction : " + row.EntryDirection + " > " + row.ExitDirection}
                  </div>
                  <div>{"Distance (meter) : " + row.Distance}</div>
                </div>
              }
              onClick={() => this.handleClickRow(index)}
            />
        </ListItem>
      ))}
      </List>
      <hr />
    </div>
  </div>
);
}