Text 如何在冒号后对齐文本

我想在每一行中的冒号后面对齐几行文本，因此它当前看起来像：

您的会员号码是：123456789
您访问网站的临时PIN是：1234

我希望它看起来像：

您的会员号码是：123456789
您访问网站的临时PIN是：1234

不使用桌子也可以这样做吗

---

亲切问候

您可以使用如下HTML：

<div>
    <span class="col1">Your Membership Number is:</span>
    <span>123456789</span>
</div>
<div>
    <span class="col1">Your temporary PIN for website access is:</span>
    <span>1234</span>
</div>  

.col1 {
width: 300px;
float: left;
}