css - 如何使点单元在CSS中对齐？

Question

如何制作如下图所示的 css。如果有简单的方法，很高兴更改 div 结构。

我试过了

<div className='row paragraph paragraph-paragraph-margin'>
                    <div className='col xs-12 beCenter'>
                        <div className='pointHistoryBigPoint'>
                            <span className='pointHistoryBigPointNum'>5,651</span>
                            <span className='pointHistoryBigPointUnit'>PTS</span>
                            <span className='pointHistoryBigPointStar'>*</span>
                        </div>
                    </div>
                </div>

CSS

  .pointHistoryBigPoint {
    font-family: "Proxima Nova";

    /*
    width: 200px;
    height: 52px;
    margin: 0 auto;
    */
    height: 100px;
  }

  .pointHistoryBigPointNum {
    font-family: "Proxima Nova Semi Bold";
    /*font-size: 60px;*/
  }

  .pointHistoryBigPointUnit {
    /*font-size:20px;*/
  }

  .pointHistoryBigPointStar {

  }

Answer 1

使用sup标签

<div className='row paragraph paragraph-paragraph-margin'>
                    <div className='col xs-12 beCenter'>
                        <div className='pointHistoryBigPoint'>
                            <span className='pointHistoryBigPointNum'>5,651</span>
                            <sup className='pointHistoryBigPointUnit'>PTS*</sup>
                            
                        </div>
                    </div>
                </div>