title: Flex-direction row and justify-content: flex-start not working
body: <p>I want to display a formula that on hover over certain text displays a <code>div</code>/message. I want my divs to display as a row, so the content should read as:</p>
  <pre><code>P(1 + R/N)nt
  </code></pre>
  <p>Right now they display as a column:</p>
  <pre><code>P
  (1 +
  R/
  N)
  n
  t
  </code></pre>
  <p>This is my code:</p>
  <pre><code>&lt;div key=&quot;4&quot;&gt;
                  &lt;b&gt;How did we get these numbers?&lt;/b&gt;
                  &lt;div className=&quot;equation&quot;&gt;
                      &lt;div&gt;
                          &lt;div
                              className=&quot;eq&quot;
                              onMouseEnter={this.handleMouseHover}
                              onMouseLeave={this.handleMouseHover}
                          &gt;
                              P
                          &lt;/div&gt;
                          {this.state.isHovering &amp;&amp; &lt;div&gt;example hover text&lt;/div&gt;}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div
                              className=&quot;eq&quot;
                              onMouseEnter={this.handleMouseHover}
                              onMouseLeave={this.handleMouseHover}
                          &gt;
                              (1 +
                          &lt;/div&gt;
                          {this.state.isHovering &amp;&amp; &lt;div&gt;example hover text&lt;/div&gt;}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div
                              className=&quot;eq&quot;
                              onMouseEnter={this.handleMouseHover}
                              onMouseLeave={this.handleMouseHover}
                          &gt;
                              R/
                          &lt;/div&gt;
                          {this.state.isHovering &amp;&amp; &lt;div&gt;example hover text&lt;/div&gt;}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div
                              className=&quot;eq&quot;
                              onMouseEnter={this.handleMouseHover}
                              onMouseLeave={this.handleMouseHover}
                          &gt;
                              N)
                          &lt;/div&gt;
                          {this.state.isHovering &amp;&amp; &lt;div&gt;example hover text&lt;/div&gt;}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div
                              onMouseEnter={this.handleMouseHover}
                              onMouseLeave={this.handleMouseHover}
                          &gt;
                            &lt;sup&gt;n&lt;/sup&gt;
                          &lt;/div&gt;
                          {this.state.isHovering &amp;&amp; &lt;div&gt;example hover text&lt;/div&gt;}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div
                              onMouseEnter={this.handleMouseHover}
                              onMouseLeave={this.handleMouseHover}
                          &gt;
                            &lt;sup&gt;t&lt;/sup&gt;
                          &lt;/div&gt;
                          {this.state.isHovering &amp;&amp; &lt;div&gt;example hover text&lt;/div&gt;}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  <p>My emotion CSS styling:</p>
  <pre><code>const equation = css`
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
  `;
  </code></pre>
  <p>This is a sandbox: <a href="https://codesandbox.io/s/emotion-pl9m3" rel="nofollow noreferrer">https://codesandbox.io/s/emotion-pl9m3</a></p>