CSSで一部だけ右寄せにして時刻や日付を、揃えたい

CSSで一部だけ右寄せにして時刻や日付を、揃えたい
span の display: inline-block + 幅指定 + 右寄せ

 午前 <span style="display: inline-block; text-align: right; width: 60;">10:30</span>


 午後 <span style="display: inline-block; text-align: right; width: 60;">6:00</span>