Displaying React component on same line as other elements

Question

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.

Here's my React code:

<div className={styles['top']}>
    <span>WHAT PEOPLE ARE SAYING</span>
    <div className={`pull-right ${styles['right']}`}>
      <span className={`${styles['rating-words']}`}>{ratingWords}</span>
      <Rating className={`${styles['overall-stars']}`}
              percentage={this.state.overallPercentage}
              color={"#00c18a"}
              under={"white"}
      />

    </div>
  </div>

and the .scss:

.top {
  margin: 30px 0;
  font-weight: bold;
  .right {
    display: inline-block;
    flex-direction: row;
  }
  .rating-words {
    text-transform: uppercase;
  }
}

and finally, a picture of what it looks like:

Both "VERY GOOD" and the rating stars should be on the same line. Any idea how to fix this?

Answer 1

If you have two child elements inside of .top this should work.

fiddle

.top {
  margin: 30px 0;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .rating-words {
    text-transform: uppercase;
  }
  .right {
  }
}