html - フロートライトが CSS で正しく機能しない

Question

CSSでfloat rightのサンプルを作成しました。ただし、要素間の順序とスペースに問題があります。結果は次のとおりです。

灰色のドットは、緑色のドットの右側に配置する必要があります。

何か考えはありますか？ありがとう、

これは私のコードサンプルです: https://jsfiddle.net/dalenguyen/mfj78LL5/

.green-dot {
  color: #20b08f;
}
.gray-dot {
  color: grey;
}
.professional-skills .green-dot,
.professional-skills .gray-dot {
  float: right;
  font-size: 1.5rem;
}

<div class="professional-skills">
  <h2>Professional Skills</h2>
  <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p>
  <p>Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot">&#x25cf; &#x25cf;</span></p>
</div>
</div>