title: Displaying React component on same line as other elements
body: <p>I'm trying to get a React component I've built to display on the same line as the rest of the text, but it keeps appearing on a different line than the rest of the elements.</p>
  
  <p>Here's my React code: </p>
  
  <pre><code>&lt;div className={styles['top']}&gt;
      &lt;span&gt;WHAT PEOPLE ARE SAYING&lt;/span&gt;
      &lt;div className={`pull-right ${styles['right']}`}&gt;
        &lt;span className={`${styles['rating-words']}`}&gt;{ratingWords}&lt;/span&gt;
        &lt;Rating className={`${styles['overall-stars']}`}
                percentage={this.state.overallPercentage}
                color={"#00c18a"}
                under={"white"}
        /&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and the .scss:</p>
  
  <pre><code>.top {
    margin: 30px 0;
    font-weight: bold;
    .right {
      display: inline-block;
      flex-direction: row;
    }
    .rating-words {
      text-transform: uppercase;
    }
  }
  </code></pre>
  
  <p>and finally, a picture of what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/PWk4M.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PWk4M.png" alt="enter image description here"></a></p>
  
  <p>Both "VERY GOOD" and the rating stars should be on the same line. Any idea how to fix this?</p>