I need to push the text next to the H2 below it. Not sure why I cant work this out but any help would be great. 

Note: You are looking at the left side.

[Fiddle Here](http://jsfiddle.net/Ruddy/3kzGg/3/)

**HTML:**

```
 <div class="item">
            <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
            <div class="button">Button</div>
        </div>

```

**CSS:**

```
.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
}

.item span {
    font-size: 10px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
}

.button {
    width: 50px;
    height: 98%;
    border: #000000 solid 1px;
    background: gray;
    float: right;
}

```

I have tried to float the text, change the display even just margin it down but I would like a good way to do this. Any help would be great, cheers all!