I have a sortable list of items (each with a draggable handle) and I'm trying to align some elements within each item: a title, link, and some descriptive text. The items are adjacent to a left-floated div (the "handle" you see on the left). Unfortunately, there is a large gap between the title and the link:

![There's a gap between the title and the link](https://i.stack.imgur.com/IzgND.png)

(<http://www.bootply.com/101604>)

Here's a mock-up I made in an image editing program that illustrates what I'm trying to achieve (no large gap between the title and the link):

![Here's the ideal layout--without the gap](https://i.stack.imgur.com/gmmKJ.png)

I know it has something to do with the `.handle` div which is floated left and has a specified width and height, but I can't quite figure it out. When I remove the `.handle`, everything lines up fine without the awkward gap. I'm sure it's a simple fix, but I'm struggling to find an answer. Any suggestions would be helpful. Thanks!
['https://Stackoverflow.com/questions/20693377', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/557928/']
Try adding these properties to your existing classes:

```
.itemSubContainer {
  overflow:hidden;
}
.handle {
  margin-right:10px;
}

```

To help clear your floated elemets, because your itemSubContainer class doesn't know about the containing elements because they are floated and taken out of the flow.
The problem is that `.row` itself is also floating left and each `.row` clears the float. Instead of floating `.handle`, use `position: absolute` so the handle doesn't interfere with the rest of the content.

Note that there's also a 10px margin on `h4` that you may wish to adjust.

![enter image description here](https://i.stack.imgur.com/e3FKw.png)