Flag using flex instead of table

Consumer.jsx

import React from 'react'
import Flag from './Flag'

const Consumer = () => (
   <Flag.Wrapper spacer="md">
    <Flag.Component>Component</Flag.Component>
    <Flag.Body>Body</Flag.Body>
  </Flag.Wrapper>
)

Flag.jsx

import styled from 'emotion'

const spacers = {
  xs: '0.25rem',
  sm: '0.5rem',
  md: '1rem',
  lg: '1.5rem',
  xl: '2rem'
}

const Wrapper = styled.div`
  display: flex;
  align-items: center;

  ${({ spacer }) =>
    spacer ? `& > :first-child { padding-right: ${spacers[spacer]}; }` : null};
`
Wrapper.propTypes = {
  spacer: T.oneOf(['xs', 'sm', 'md', 'lg'])
}

Wrapper.defaultProps = {
  spacer: null
}

const Body = styled.div`
  flex-grow: 1;
`

const Component = styled.div``

export default { Wrapper, Body, Component }