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

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

1. 午前 <span style="display: inline-block; text-align: right; width: 60;">10:30</span>  
2.   
3.   
4. 午後 <span style="display: inline-block; text-align: right; width: 60;">6:00</span>  

 午前 <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>