Spacer.jsx

// Examples
export class App extends Component {
  render() {
    return (
      <main>
        <Spacer type="small">
          <p>Hello dude!</p>
        </Spacer>
        <Spacer type="medium">
          <div>
            {/* more elems */}
          </div>
        </Spacer>
        <Spacer type="medium">
          <section>
            {/* more elems */}
          </section>
        </Spacer>
      </main>
    )
  }
}

// Component Interface
<Spacer type="small">SINGLE_CHILDREN</Spacer>

// Component Implementation
function Spacer(props) {
  const spaces = {
    'small': '0.75em',
    'medium': '1em'
  }
  const clone = React.cloneElement(props.children, {
    style: { marginLeft: spaces[props.type] }
  })
  return React.Children.only(clone)
}

// Output Example
// <main>
//  <p style="margin-left: 0.75em">Hello dude!<p>
//  <div style="margin-left: 1em"><div>
//  <section style="margin-left: 1em"><section>
// </main>