Cannot align text next to image - html

Question

Here is the result I need to achieve:
Here is what I have thus far:
As you can see, there are several updates to be made.
My questions are:
1./ How do I get the text next to the avatar to line up 10px to the right of the avatar. Currently its being thrown below the avatar.
2./ Once I align up the text next to the avatar, how do I then line up my text that sits at the very right? I believe I can create a div and float right
I'm only a few days into CSS so I'm still a newbie so please any details would be phenomenial
Here is my HTML:
<div class="page">
<table class="reviewsouter" cellspacing="0" cellpadding="0">
<tr>
<td class="reviewleft">
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td>
<div>test</div>
<img class="avatar" src="/avatar/35274"/>
</td>
</tr>
<tr class="reviewuserdata">
<td></td>
</tr>
</table>
</div>
</td>
<td class="reviewright"></td>
</tr>
</table>
</div>
And Here is my CSS:
#CHARSET "UTF-8";
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px 0px 10px 10px;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
}
Any help would be great.
UPDATE
Ok so I got this far now:
Here is my new HTML for this div(the reviewuserinfo div):
<tr class="reviewuserinfo">
<td width="60px"><img class="avatar" src="/act/avatar/35274"/></td>
<td>Text2</td>
<td align="right" style="padding-right:15px">Text3</td>
</tr>
What I need now is to move the text up so it starts at the same position as the top of the avatar - basically horizontal to the top of the image avatar

Answer 1

What do you think about this https://jsfiddle.net/2Lzo9vfc/107/
HTML
<div class="page">
<div class="left">
<img src="http://placehold.it/50x50" alt="">
<div class="left-content">
<h4>Lorem ipsum</h4>
<p>Posted bla bla</p>
</div>
</div>
<div class="right">
<p>Joined lorem ipsum</p>
<p>12 reviews bla lorem ipsum</p>
</div>
</div>
CSS
body, h4, p {
margin: 0;
padding: 0;
}
.page {
padding: 20px;
background: #F0F0F0;
clear: both;
display:inline-block;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.left-content, img {
display: inline-block;
vertical-align: middle;
}

Answer 2

What if you simply add horizontal cells and include the image and text in each one of them?