他の要素と同じ行に反応コンポーネントを表示

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の内部に2つの子要素がある場合、これはうまくいくはずです。

fiddle

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

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

Answer 2

あなたは作業jsfiddleを投稿したり、それを支援するために容易になるだろうcodepen場合。

overall-starsクラスdisplay: inline-blockをお試しください。私はそれが既にブロック要素であると仮定して、新しい行に表示します。

Answer 3

@Chorkが言ったことに基づいて、次のように動作するようになりました。@torkjelsは他の場所でうまく動作するようになりました。

.top { 
    margin-top: 40px; 
    margin-bottom: 30px; 
    font-weight: bold; 
    .right { 
    display: inline-flex; 
    flex-direction: row; 
    } 
    .rating-words { 
    text-transform: uppercase; 
    margin-right: 10px; 
    } 
    .overall-stars { 
    margin-top: -2px; 
    } 
}