title: Wrapping React components into div messing them up
body: <p>I have my game like this:
  <a href="https://i.stack.imgur.com/OeynV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OeynV.png" alt="game"></a></p>
  
  <p>Im using <code>react-contexify</code> to make a custom contextmenu in React
  Here's my code before:</p>
  
  <pre><code>&lt;MenuProvider key="0"&gt;
    &lt;Message
      className="ChatMessage"
      style={{ width: isMobile() ? "60%" : "40%", backgroundColor: "#424751" }}
    &gt;
      &lt;h3 className="Username"&gt;{this.props.username}&lt;/h3&gt;
      :&amp;nbsp;
      &lt;p className={Boolean(this.props.rainbow) ? "RainbowMessage" : "Message"}&gt;
        {this.props.children}
      &lt;/p&gt;
    &lt;/Message&gt;
  
    &lt;Menu&gt;
      &lt;Item&gt;Lorem&lt;/Item&gt;
      &lt;Item&gt;Ipsum&lt;/Item&gt;
      &lt;Separator /&gt;
      &lt;Item disabled&gt;Dolor&lt;/Item&gt;
      &lt;Separator /&gt;
      &lt;Submenu label="Foobar"&gt;
        &lt;Item&gt;Foo&lt;/Item&gt;
        &lt;Item&gt;Bar&lt;/Item&gt;
      &lt;/Submenu&gt;
    &lt;/Menu&gt;
  &lt;/MenuProvider&gt;
  </code></pre>
  
  <p>And my code after:</p>
  
  <pre><code>&lt;MenuProvider key="0"&gt;
                          &lt;Message className="ChatMessage" style={{"width": isMobile() ? "60%" : "40%","backgroundColor": "#424751"}}&gt;
                              &lt;h3 className="Username"&gt;
                                  {this.props.username}
                              &lt;/h3&gt;
                              :&amp;nbsp;
                              &lt;p className={Boolean(this.props.rainbow) ? "RainbowMessage" : "Message"}&gt;
                                  {this.props.children}
                              &lt;/p&gt;
                          &lt;/Message&gt;
  
                          &lt;Menu&gt;
                              &lt;Item&gt;Lorem&lt;/Item&gt;
                              &lt;Item&gt;Ipsum&lt;/Item&gt;
                              &lt;Separator /&gt;
                              &lt;Item disabled&gt;Dolor&lt;/Item&gt;
                              &lt;Separator /&gt;
                              &lt;Submenu label="Foobar"&gt;
                              &lt;Item&gt;Foo&lt;/Item&gt;
                              &lt;Item&gt;Bar&lt;/Item&gt;
                              &lt;/Submenu&gt;
                          &lt;/Menu&gt;
                      &lt;/MenuProvider&gt;
  </code></pre>
  
  <p>But this code results to this:
  <a href="https://i.stack.imgur.com/5mLrE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5mLrE.png" alt="mygameafter"></a></p>
  
  <p>It's the same as having wrapped it in a div...
  But why? What's wrong? 
  Thanks</p>