styling issues and accessing child

Question

<div className={classes.scoreContainer}>
    <span className="label">
      {`${scorecard.score.totalRuns||0}/${scorecard.score
      .totalWickets||0}${isCurrentInning?"*":""}`}
    <span className="overclass">
        ({`${scorecard.score.overs}.${
        scorecard.score.overBalls
        }ov`}) // want to change font of this
    </span>
    </span>
</div>

I want the bot the data to be displayed on same line but the data inside second span with different font size .

Here is the css for this .

    scoreContainer {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "flex-end",
      "&>span:first-child": {
      fontWeight: 520,
      },
      "&>span:second-child":{
      fontWeight:10,
      },
      "&>span:nth-child(2)": {
      fontWeight: 300,
      fontSize: "2vh",
      }
    }

However I am not able to acess that span properly .We can't create two spans and put them inside div as this will shit them on two different lines . This is not what we can do

    <div>
      <span>data1</span>
       <span>data2</span>
    </div>

Answer 1

"&>span>span":{
    fontWeight:10,
    /* fontWeight: 300, don't know if you need 10 or 300 */
    fontSize: "2vh",
}

As @Mukyuu suggested, the above would be the selector for the span inside the first (and only) child span in the div