Make selected item fit on one line, not two

I have a very simple select and when I click on the menu it shows 3 options, all on one-line each. However, when I select an item, it shows it on 2 lines: 1 line for the text and another for the icon. How do I make it so it is one line?

import "./styles.css";  import EditIcon from "@material-ui/icons/Edit";  import ListItemIcon from "@material-ui/core/ListItemIcon";  import ListItemText from "@material-ui/core/ListItemText";  import Select from "@material-ui/core/Select";  import FormControl from "@material-ui/core/FormControl";  import InputLabel from "@material-ui/core/InputLabel";  import MenuItem from "@material-ui/core/MenuItem";  import FormHelperText from "@material-ui/core/FormHelperText";    const items = ["a", "b", "c"];    export default function App() {    return (      <>        <FormControl>          <InputLabel>Please select an option</InputLabel>          <Select required defaultValue="hi" fullWidth>            {items.map((item, idx) => (              <MenuItem key={idx} value={item}>                <ListItemText primary={item} />                <ListItemIcon>                  <EditIcon />                </ListItemIcon>              </MenuItem>            ))}          </Select>          <FormHelperText>Just select something already</FormHelperText>        </FormControl>      </>    );  }  

https://codesandbox.io/s/brave-stallman-9brmk?file=/src/App.js

https://stackoverflow.com/questions/67030656/make-selected-item-fit-on-one-line-not-two April 10, 2021 at 11:58AM