Bringing the p and div in the same line - html

Question

I have type of card created. It has 3 rows with a p and a div. I want both of them to come in the same line. How can I do this?
HTML:
<div class="user_card">
<div class="skills">
<p>Skills</p>
<div class="progress_wrap">
<div class="progress" style="width:95%"></div>
</div>
</div>
<div class="commitment">
<p>Commitment</p>
<div class="progress_wrap">
<div class="progress" style="width:35%;"></div>
</div>
</div>
<div class="reputation">
<p>Reputation</p>
<div class="progress_wrap">
<div class="progress" style="width:65%;"></div>
</div>
</div>
</div>
CSS:
.user_card {
background-color: #eee;
width: 30%;
padding: 10px;
}
.user_card div p {
display: inline;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}
Fiddle.
Please post fiddle as well with your answers!

Answer 1

Using display table, table-row, table-cell.
http://jsfiddle.net/vnama/
.user_card {
background-color: #eee;
width: 30%;
padding: 10px;
display:table;
}
.user_card p {
display: table-cell;
vertical-align:top;
line-height:30px;
padding:2px 10px 2px 2px;
}
.user_card div {
display:table-row;
padding:2px;
}
.user_card div div {
display:table-cell;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}

Answer 2

You can try using tables: http://jsbin.com/efugop
I have it:
HTML:
<div class="user_card">
<div class="skills">
<table><tr><td>
<p>Skills</p></td><td>
<div class="progress_wrap" style="margin-left:70px;">
<div class="progress" style="width:95%"></div>
</div></td></tr></table></div>
<div class="commitment">
<table><tr><td>
<p style="position:relative;margin-top:6px;">Commitment</p>
<div class="progress_wrap" style="position:relative;left:35px;margin-left:70px;">
<div class="progress" style="width:35%;"></div>
</div></td></tr></table>
</div>
<div class="reputation">
<table><tr><td>
<p style="position:relative;margin-top:6px;">Reputation</p>
<div class="progress_wrap" style="position:relative;left:35px;margin-left:70px;">
<div class="progress" style="width:65%;"></div>
</div>
</td></tr></table>
</div>
</div>
CSS:
.user_card {
background-color: #eee;
width: 50%;
padding: 20px 80px 20px 20px;
}
.user_card div p {
display: inline;
float: left;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100px;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}

Answer 3

You can use css to float left
. progress_wrap {
float: right;
}

Answer 4

HTML
<div class="user_card">
<div class="skills">
<p>Skills</p>
<div class="progress_wrap" style="margin-left:80px;">
<div class="progress" style="width:95%"></div>
</div>
</div>
<div class="commitment">
<p style="margin-left:-35px;">Commitment</p>
<div class="progress_wrap" style="margin-left:80px;">
<div class="progress" style="width:35%;"></div>
</div>
</div>
<div class="reputation">
<p style="margin-left:-73px;">Reputation</p>
<div class="progress_wrap" style="margin-left:80px;">
<div class="progress" style="width:65%;"></div>
</div>
</div>
In CSS
.user_card {
background-color: #eee;
width: 50%;
padding: 20px 100px 20px 20px;
}
.user_card div p {
display: inline;
float: left;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}