realign code and button

addons/info/src/components/markdown/pre/copyButton.js

@@ -12,9 +12,7 @@ const Button = glamorous.button(
     cursor: 'pointer',
     fontSize: 13,
     padding: '3px 10px',
-    position: 'absolute',
-    right: 12,
-    top: 12,
+    alignSelf: 'flex-start',
 
     ':hover': {
       backgroundColor: '#f4f7fa',

addons/info/src/components/markdown/pre/pre.js

@@ -7,8 +7,11 @@ import copy from './copy';
 
 const TOGGLE_TIMEOUT = 1800;
 
-const StyledPre = glamorous(({ setRef, styles, ...rest }) => <pre {...rest} ref={setRef} />)(
+const StyledPre = glamorous.pre(
   {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     fontSize: '.88em',
     fontFamily: 'Menlo, Monaco, "Courier New", monospace',
     backgroundColor: '#fafafa',
@@ -19,10 +22,6 @@ const StyledPre = glamorous(({ setRef, styles, ...rest }) => <pre {...rest} ref=
   props => props.styles
 );
 
-const wrapperStyle = {
-  position: 'relative',
-};
-
 class Pre extends React.Component {
   state = {
     copied: false,
@@ -53,12 +52,10 @@ class Pre extends React.Component {
     const { pre } = this.props.theme;
 
     return (
-      <div style={wrapperStyle}>
+      <StyledPre styles={pre}>
+        <div ref={this.setRef}>{this.props.children}</div>
         <CopyButton onClick={this.handleClick} toggled={this.state.copied} />
-        <StyledPre styles={pre} setRef={this.setRef}>
-          {this.props.children}
-        </StyledPre>
-      </div>
+      </StyledPre>
     );
   }
 }