Align a href to top of div text to a div - html

Question

I'm trying to align an a tag to the top of my div in bootstrap. This is the current code I have:
<div class="authorAvatar">
<img src="<?php echo $author->avatar;?>" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?>
<?php echo $author->points;?>
</a>
</div>
What I am trying to achieve is the user's avatar being displayed, and then next to it, the username and the user's points directly below it. I have tried used the following CSS code:
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar a {
display:inline;
vertical-align: text-top;
}
But the a href is centered in the div. I have also tried adding a position:relative to the authorAvatar and a position:absolute; and top:0px; to the a tag, but then the image is underneath the a href tag.
Here is a plunkr:
http://plnkr.co/edit/9HVQ4U3UjjqaiHzlxqkO
How can I achieve something of this effect:
image username
image points
image

Answer 1

If you are using bootstrap, try using the boostrap's css classes instead of your own css.
<img class="img-responsive pull-left"src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="height:50px">
<a class="pull-right"href="#">blabla</a>

Answer 2

.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar img{
display: inline-block;
}
.authorAvatar a {
display: inline-block;
vertical-align: top;
}
<div class="authorAvatar">
<img src="http://lorempixel.com/100/100/nature/" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?><br>
<?php echo $author->points;?>
</a>
</div>

Answer 3

Check whether this effect fits what you need.
http://plnkr.co/edit/bdzuVhgAqaP6Bi6pLqOW?p=preview
html:
<link rel="stylesheet" href="style.css">
<div class="authorAvatar">
<img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="width:auto;height:50px;">
<a href="profile.php?id=1>">
<div>blahblahblah</div>
<div>blahblahblah</div>
</a>
</div>
css:
.authorAvatar {
height:50px;
}
.authorAvatar a {
display:inline-block;
vertical-align: top;
}