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:**

```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:**

```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.](http://jsfiddle.net/m7jWJ/)

Please post fiddle as well with your answers!