vertically align floated element

Question

First of all, here are some images explaining what exactly I'm trying to do:

How it should be:

This is how it is right now:

This is the markup:

 <div class="info">
    <img src="http://placehold.it/40x40" class="img-rounded avatar">
     <h5 class="name">John Doe</h5>
     <time>2 days ago</time>
     <a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
     <a class="like">112 likes</a>
  </div>

CSS:

.info {
border:1px solid #E6E6E6;
padding-top:20px;
padding-bottom:20px;

}

img.avatar {
float:left;
padding-left:20px;
padding-right:20px;

}
h5.name {
 margin:0;
}
span.date {
font-size:12px;
}
a.like { 
float:right;
padding-right:20px;
}

Here's a jsbin example with what I'm trying to do.

Any suggestions on how can I align them as in the screenshot?

Answer 1

Instead of assigning various classes to hyperlinks, nest them in the block element.

I changed your code, and updated the jsbin, is this what you were seeking?

http://jsbin.com/lajugiciyi/1/edit

.info {
    border: 1px solid #E6E6E6;
    padding: 20px 0
}
.avatar {
    float: left;
    padding: 0 20px;
}
.name {
    display: inline-block
}
.name h5 {
    margin: 0;
    padding: 3px 0 0;
}
.like { 
    float: right;
    padding: 0 20px;
}
.follow {
   display: inline-block;
   vertical-align: top;
   padding: 0 20px;
}

Answer 2

You want the follow/like buttons to be aligned with the name, right?

HTML:

<div class="info">
    <img src="http://placehold.it/40x40" class="img-rounded avatar" />
    <div>
        <h5 class="name">John Doe</h5>
        <a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
        <a class="like">112 likes</a>
    </div>
    <time>2 days ago</time>
</div>

CSS:

h5.name {
 margin:0;
 display:inline;
}

http://jsfiddle.net/1319Lw2r/1/

Answer 3

Add the following:

a.follow {
    margin-left: 10%; /* adjust to your liking */
}

I would recommend using margin instead of padding where you have it in your example, as well.

For example, padding is pushing the text inside the <a> tag which makes the anchor wider than it needs. By using margin instead it pushes the anchor while keeping it's size constrained to the content. You can test this by putting a border around the <a> tag.