How to align 2 fields into 1 row?

Question

I'm new to css. My jsfiddle here http://jsfiddle.net/PAHdH/

<div>
    <label>Name: </label><p>John</p>
    <label>Age: </label><p>35</p>
    <label>Level: </label><p>60</p>
    <label>Score: </label><p>5000</p>
</div>

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
    color:black;
}

p {margin-bottom:2px; padding:0;}

​

I would like to change to

Name: John Age: 35
Level: 60 Score: 5000

It should be like a table with 4 columns.

Answer 1

Demo

Hi now your markup is wrong please change to your markup html and css write

as like this

HTML

<div>
   <p> <label>Name: </label>
       <span>John</span>
       <label>Age: </label><span>35</span></p>


    <p><label>Level: </label><span>60</span>
        <label>Score: </label><span>5000</span></p>
</div>

Css

label, span{
float:left;
    margin:1px;
    background:rgba(0,0,0,0.3);
        width:150px;
    padding:2px;
}
p{
overflow:hidden;
}

Live Demo