html - Aligning a set of labels and values -

i new in html , css hard how can align semicolon screenshot?

psd like:

here html markup

 <ul>     <li>name <span>: john doe</span></li>     <li>age <span>: 30.30.30</span></li>  </ul> 

and css

li span {     padding-left: 20px; } 

and result screeshot:

what appropriate markup , css this?

use display:table-row li , display:table-cell labels.

li  {      padding-left: 20px;      display: table-row;  }      li label {    display: table-cell;  }    li label:not(:first-child) {      padding-left: 40px;  }

 <ul>      <li><label>name</label><label>: john doe</label></li>      <li><label>age</label><label>: 30.30.30</label></li>   </ul>

wiki