DescriptionList component interface implemented with styled-system

primary-description-list.jsx

const PrimaryDescriptionList = () => (
  <DescriptionList
    flexDirection={['column', 'row']}
  >
    <DescriptionList.Item
      mr={[0, 4]}
    >
      <DescriptionList.Label>Label 1</DescriptionList.Label>
      <DescriptionList.Detail>Detail 1</DescriptionList.Detail>
    </DescriptionList.Item>
    <DescriptionList.Item
      mr={[0, 4]}
    >
      <DescriptionList.Label>Label 2</DescriptionList.Label>
      <DescriptionList.Detail>Detail 2</DescriptionList.Detail>
    </DescriptionList.Item>
    <DescriptionList.Item
      mr={[0, 4]}
    >
      <DescriptionList.Label>Label 3</DescriptionList.Label>
      <DescriptionList.Detail>Detail 3</DescriptionList.Detail>
    </DescriptionList.Item>
  </DescriptionList>
)

secondary-description-list.jsx

const SecondaryDescriptionList = () => (
  <DescriptionList
    flexDirection={['column', 'row', 'column']}
    justifyContent={'space-between'}
  >
    <DescriptionList.Item
      justifyContent={['space-between', 'flex-start', 'space-between']}
      mr={[0, 4, 0]}
    >
      <DescriptionList.Label>Label 1</DescriptionList.Label>
      <DescriptionList.Detail>Detail 1</DescriptionList.Detail>
    </DescriptionList.Item>
    <DescriptionList.Item
      justifyContent={['space-between', 'flex-start', 'space-between']}
      mr={[0, 4, 0]}
    >
      <DescriptionList.Label>Label 2</DescriptionList.Label>
      <DescriptionList.Detail>Detail 2</DescriptionList.Detail>
    </DescriptionList.Item>
  </DescriptionList>
)