divタグの中に他のタグを入れたい

Question

画像のような感じのを作りたいです。
checkはbooleanとなっており、checkによってcheckの丸いアイコンの表示非表示が決まります。
divタグの中にpタグを埋め込むとチェックのボタンがDivタグの外側にはみ出してしまいます。
どうしたらいいのでしょうか？
ご教授お願いしたいです。

に言語を入力

const Div = styled.div`
  height: 28px;
  width: 150px;
  background-color: #f0f9ff;
  .text {
    display: inline-block;
    margin-left: 10px;
  }
  .check {
    display: inline-block;
    border-radius: 50%;
    background: #57afe6;
    color: #fff;
    margin-left: 10px;
  }
`;

return (
          <Div>
            テキスト
            {checked? (
              <>
                <p className="text">ああああああああああああああ</p>
                <p classNema="check">チェック</p>
              </>
            ) : (
              <p className="text">ああああああああああああああ</p>
            )}
          </Div>
)

Answer 1

<ｐ classNema="check">チェック</p>
最初のpが全角ですが。。