React: Material-UI - how to style the two item list so items will be next to each other?

Question

I've got a list that consists of two items: 'label' and 'value', this is how it currently looks like:

How I can move items that are on the right side to the left, so they would stay next to the label?

This is my code sample:

  <List>
    {details.map((item, index) =>
      <ListItem key={index} divider alignItems="flex-start">

        <ListItemIcon>
          <i className={item.icon}/>
        </ListItemIcon>

        <ListItemText className="br-break" primary={item.label} />

        <ListItemSecondaryAction>
          <ListItemText className="br-break" primary={item.data}/>
        </ListItemSecondaryAction>

      </ListItem>
    )}
  </List>

I've tried to remove <ListItemSecondaryAction> tag - didn't work.

Answer 1

One option is to use material-ui styling to override ListItemText flex value:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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';

const useStyles = makeStyles(theme => ({
  root: {
    flex: '0.2',
    minWidth: '100px'
  },
}));

export default function ListDemo() {
  const classes = useStyles();

  const details = [
    {
      label: 'Issue Number',
      data: 'CCM-1007'
    },
    {
      label: 'Environment',
      data: 'TST'
    },
    {
      label: 'Country',
      data: 'SE'
    },
  ]

  return (
    <List>
    {details.map((item, index) =>
      <ListItem key={index} divider alignItems="flex-start">
        <ListItemIcon>
          <i className={item.icon} />
        </ListItemIcon>
        <ListItemText className={classes.root} primary={item.label} />
        <ListItemText className={classes.root} primary={item.data} />
      </ListItem>
    )}
  </List>
  );
}

Answer 2

• Another solution without makeStyles.

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";

export default function ListDemo() {

  const details = [
    {
      label: "Issue Number",
      data: "CCM-1007"
    },
    {
      label: "Environment",
      data: "TST"
    },
    {
      label: "Country",
      data: "SE"
    }
  ];

  return (
    <List>
      {details.map((item, index) => (
        <ListItem key={index} divider alignItems="flex-start">
          <ListItemIcon>
            <i className={item.icon} />
          </ListItemIcon>
          <ListItemText
            primary={item.label}
            primaryTypographyProps={{
              display: "inline"
            }}
            secondary={item.data}
            secondaryTypographyProps={{
              display: "inline"
            }}
          />
        </ListItem>
      ))}
    </List>
  );
}