How to align primary and secondary text horizontally and not vertically with Material-UI? - material-ui

Question

I have this code:
import React from 'react';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import ArrowForwardIos from '#material-ui/icons/ArrowForwardIos';
import ListSubheader from '#material-ui/core/ListSubheader';
import Switch from '#material-ui/core/Switch';
import TextField from '#material-ui/core/TextField';
import ListItemAvatar from '#material-ui/core/ListItemAvatar';
import Avatar from '#material-ui/core/Avatar';
import FolderIcon from '#material-ui/icons/Folder';
import ListItemSecondaryAction from '#material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '#material-ui/icons/Delete';
import IconButton from '#material-ui/core/IconButton';
function App() {
return (
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary="Secondary text"
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
}
export default App;
"Single-line item" and "Secondary text" is vertically aligned, but I need align it horizontally. Do you have any idea how to do it?
Instead of left I need rendering on the right here:
https://gitlab.com/j4nos/tableitem/blob/master/src/App.js
How? :)

Answer 1

I managed to get the desired output using a few other elements and referring the material-ui documentation. here is a working example: https://codesandbox.io/s/sweet-bose-4e26h
function App() {
return (
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<Box
textAlign="right"
style={{ paddingRight: 5 }}
>
Single-line item
</Box>
<ListItemText
secondaryTypographyProps={{ align: "left" }}
secondary="Secondary text"
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
}

Answer 2

Alternative using Material-UI's built-in overrides on ListItemText.classes.root as seen below:
<ListItem className={classes.listItem}>
<ListItemText
classes={{ root: classes.listItemRootOverride }}
className={classes.listText}
primary={`${tc('Foo')}:`}
/>
<ListItemText
classes={{ root: classes.listItemRootOverride }}
secondary={bars}
/>
</ListItem>
Classes in useStyles:
listItemRootOverride: { /* this is the important one */
flex: 'none',
paddingRight: 4
},
listItem: {
padding: theme.spacing(0)
},
listText: {
color: theme.palette.common.black,
paddingRight: theme.spacing(2)
}
Example output (disregard minor alignment issue):