在与其他元素相同的行上显示 React 组件

Question

我试图让我构建的 React 组件与文本的其余部分显示在同一行，但它始终显示在与其余元素不同的行上。

这是我的反应代码：

<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>

和 .scss：

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

最后，看一下它的样子：

“非常好”和评级星星应该在同一条线上。知道如何解决这个问题吗？

Answer 1

如果 .top 中有两个子元素，这应该可以工作。

小提琴

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

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