求大佬教一下怎么写出下面图片的效果，特别是里面的文字大小不一样怎么布局

一个大div里三个小div，每个小div的行高等于大div ，大div用border-rasius实现类似这种效果。大概就是这样。类名瞎起的你改一下，圆角根据你的要求自己改一下，包括字号颜色。。。

<!DOCTYPE html>
<html>

<head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title></title>
      <style type="text/css">
            * {
                  margin: 0;
                  padding: 0;
            }

            .box {
                  width: 120px;
                  height: 80px;
                  background: red;
            }



            .parent {
                  width: 100px;
                  height: 50px;
                  /* background: red; */
                  border-radius: 25px;
                  border: 1px solid white;
                  display: flex;
            }

            .pp {
                  margin: 0 auto;
                  display: flex;
            }

            .jia {
                  line-height: 50px;
                  color: white;
                  font-size: 14px;
            }

            .score {
                  line-height: 50px;
                  color: white;
                  font-size: 24px;
            }

            .dan {
                  line-height: 50px;
                  color: white;
                  font-size: 16px;
                  margin-left: 6px;
            }
      </style>
</head>

<body>
      <div class="box">
            <div class="parent">
                  <div class="pp">
                        <div class="jia">+</div>
                        <div class="score">50</div>
                        <div class="dan">分</div>
                  </div>

            </div>
      </div>

</body>

</html>