Material-UI Definition List. https://codesandbox.io/s/y2mjwnwj49

_Image.png

DefinitionItem.tsx

import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
import * as React from 'react'

interface Props {
  term: string
}

type ClassKey = 'term' | 'description'

const DefinitionItem: React.SFC<Props & WithStyles<ClassKey>> = ({ term, classes, children }) => (
  <TableRow>
    <TableCell component="th" scope="row" className={classes.term}>
      {term}
    </TableCell>
    <TableCell className={classes.description}>{children}</TableCell>
  </TableRow>
)

export default withStyles<ClassKey>(theme => ({
  term: {
    backgroundColor: theme.palette.background.default,
    whiteSpace: 'nowrap',
    wordBreak: 'keep-all'
  },
  description: {
    width: '100%'
  }
}))(DefinitionItem)

DefinitionList.tsx

import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import * as React from 'react'

type ClassKey = 'root'

const DefinitionList: React.SFC<WithStyles<ClassKey>> = ({ children, classes }) => (
  <Table>
    <TableBody className={classes.root}>{children}</TableBody>
  </Table>
)

export default withStyles<ClassKey>(theme => ({
  root: {
    '& tr:first-child': {
      borderTopColor: theme.palette.divider,
      borderTopStyle: 'solid',
      borderTopWidth: '1px'
    }
  }
}))(DefinitionList)

Usage.tsx

import * as React from "react";
import DefinitionList from "./DefinitionList";
import DefinitionItem from "./DefinitionItem";

const Usage = () => (
  <DefinitionList>
    <DefinitionItem term="SGML">The Standard Generalized Markup Language</DefinitionItem>
    <DefinitionItem term="HTML">The Hypertext Markup Language</DefinitionItem>
    <DefinitionItem term="XML">The Extensible Markup Language</DefinitionItem>
  </DefinitionList>
);