Improve styling with flexbox (#8)

* Improve styling

README.md

@@ -82,15 +82,15 @@ One of the props (onAccept) is a function, this function will be called after th
 | buttonText    | String or React component        | I understand  | Text to appear on the button                                                                          |
 | cookieName    | string                           | CookieConsent | Name of the cookie used to track whether the user has agreed.                                         |
 | onAccept      | function                         | () => {}      | Function to be called after the accept button has been clicked.                                       |
-| style         |              Object              |  ![barstyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/barStyle.png?raw=true)             | React styling object for the bar.                                                                     |
-| buttonStyle   |              Object              |   ![buttonStyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/buttonStyle.png?raw=true)              | React styling object for the button.                                                                  |
-
-
+| style         | Object                           | [look at source][style] | React styling object for the bar.                                                           |
+| buttonStyle   | Object                           | [look at source][buttonStyle] | React styling object for the button.                                                  |
+| contentStyle  | Object                           | {}            | React styling object for the content.                                                                 |
 
 ## Styling it
 
-You can provide styling for both the bar and the button.
-You can do this using the `style` and `buttonStyle` prop, both of these will append / replace the default style of the component.
+You can provide styling for the bar, for the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children content and button. 
+
+You can style each component with using the `style`, `buttonStyle` and `contentStyle` prop. These will append / replace the default styles of the components.
 
 You can use `disableStyles={true}` to disable any built-in styling.
 
@@ -146,3 +146,6 @@ import CookieConsent, { Cookies } from "react-cookie-consent";
 >
 </CookieConsent>
 ```
+
+[style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L17-L28
+[buttonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L29-L38

src/index.js

@@ -15,26 +15,28 @@ class CookieConsent extends Component {
     this.state = {
       visible: true,
       style: {
-        position: "fixed",
-        width: "100%",
-        padding: "15px",
+        alignItems: "baseline",
         background: "#353535",
         color: "white",
+        display: "flex",
+        justifyContent: "space-between",
         left: "0",
-        zIndex: "999",
-        lineHeight: "30px",
-        textAlign: "left"
+        padding: "15px",
+        position: "fixed",
+        width: "100%",
+        zIndex: "999"
       },
       buttonStyle: {
-        position: "absolute",
-        right: "50px",
-        border: "0",
         background: "#ffd42d",
-        boxShadow: "none",
+        border: "0",
         borderRadius: "0px",
-        padding: "5px",
-        color: "black"
-      }
+        boxShadow: "none",
+        color: "black",
+        flex: "0 0 auto",
+        marginLeft: "15px",
+        padding: "5px 10px"
+      },
+      contentStyle: {}
     };
   }
 
@@ -57,7 +59,6 @@ class CookieConsent extends Component {
   }
 
   render() {
-
     // If the bar shouldn't be visible don't render anything.
     if (!this.state.visible) {
       return null;
@@ -67,18 +68,21 @@ class CookieConsent extends Component {
       location,
       style,
       buttonStyle,
+      contentStyle,
       disableStyles,
       onAccept,
       buttonText
     } = this.props;
 
-    let myStyle = {},
-      myButtonStyle = {};
+    let myStyle = {};
+    let myButtonStyle = {};
+    let myContentStyle = {};
 
     if (disableStyles) {
       // if styles are disabled use the provided styles (or non)
       myStyle = Object.assign({}, style);
       myButtonStyle = Object.assign({}, buttonStyle);
+      myContentStyle = Object.assign({}, contentStyle);
     } else {
       // if styles aren't disabled merge them with the styles that are provided (or use default styles)
       myStyle = Object.assign({}, { ...this.state.style, ...style });
@@ -86,6 +90,10 @@ class CookieConsent extends Component {
         {},
         { ...this.state.buttonStyle, ...buttonStyle }
       );
+      myContentStyle = Object.assign(
+        {},
+        { ...this.state.contentStyle, ...contentStyle }
+      );
     }
 
     // syntactic sugar to enable user to easily select top / bottom
@@ -101,7 +109,7 @@ class CookieConsent extends Component {
 
     return (
       <div className="cookieConsent" style={myStyle}>
-        {this.props.children}
+        <div style={myContentStyle}>{this.props.children}</div>
         <button
           style={myButtonStyle}
           onClick={() => {
@@ -120,10 +128,15 @@ CookieConsent.propTypes = {
   location: PropTypes.oneOf(["top", "bottom"]),
   style: PropTypes.object,
   buttonStyle: PropTypes.object,
+  contentStyle: PropTypes.object,
   children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
   disableStyles: PropTypes.bool,
   onAccept: PropTypes.func,
-  buttonText: PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.element]),
+  buttonText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.element
+  ]),
   cookieName: PropTypes.string
 };
 CookieConsent.defaultProps = {