How to display the labels and values in two separate columns in a view?

Question

I created a view in Drupal 7 that displays some user fields. I'm currently using an unformatted list layout, but I'm not very pleased with the way it looks.

I'd like to display the field labels ("Name", "Age" and "Country") and the field values ("Jeroen", "19" and "Belgium") in my view in two columns, both outlined at the left.

I know how to remove the colons, but I don't have a clue about how to separate the field labels and values. How can I do that?

---

Edit: Giving Ajay's answer a try, I now have the following code:

<div>
 <div class = "user-label">Name</div>
 <div class ="user-value">[field_name]</div>
</div>
<div>
 <div class = "user-label">Age</div>
 <div class ="user-value">[field_age]</div>
</div>
<div>
 <div class = "user-label">Country</div>
 <div class ="user-value">[field_country]</div>
</div>

This is the styling:

 .user-label{
    float:left;
    font-weight: bold;
   }

  .user-value{
    float:left;
    margin-left: 20px;
  }

That doesn't look very pretty however. How can I align the values nicely in two columns?

Answer 1

Thanks for the updated HTML structure. You could go with float :

<!--language:css-->.user-label {
  float:left;
  clear:left;
  width:5em;/* tune this, you may other div for input too*/
}

Answer 2

1)created view name as "Test"

2)Go to field section and Add field as "Name" from user while adding field below it has option "Rewrite Result" section.

3)open "Rewrite Result" section where you can get check box name as "rewrite the output of this field" check the box and write following code

 <div class= "main-user">
     <div class = "user-label">Name</div>
     <div class ="user-value">[name]</div>
 </div>

and add style in you custom.css file of theme

 .user-label{
    float:left;
   }

  .user-value{
    float:left;
  }