Cannot change text spacing and float to change text position - html

Question

So, here is my problem. I am trying to create an email signature creator and I was writing my code but it is acting strange and putting in a strange spacing that I don't understand. I tried changing the float and the display but I can't because it all has to display inline and if it isn't floating right, then it doesn't position correctly. Here is my code so far:
HTML
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div id = "allBody">
<div id = "image">
<img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image">
</div>
<div id = "fullName">Billy Staples</div>
<div id = "job"><i>Programmer</i></div>
<div id = "line"></div>
</div>
CSS
#allBody {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
margin-right: 15px;
display: inline;
}
#line {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
margin-right: 25px;
display: inline;
float: right;
}
#fullName {
display: inline;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
display: inline;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 40px;
}
Basically, what I am trying to get is so that the name (Billy Staples) to be next to the job (Programmer) so that it doesn't look like there isn't that embarrassing tab-looking-thing before the name text.
A working version of this code can be found here.
I believe this may be possible if I was to used a table but I have not completely understood table positioning and I am not very good at them. If you do believe this code would be improved by using a table, it would be appreciated if you could add an example I could follow until I got the hang of it.

Answer 1

Fastest approach I can think of would be a 1 line css negative margin (if this is not what you want, please clarify since I'm not 100% sure of your desired output):
#allBody {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
margin-right: 15px;
display: inline;
}
#line {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
margin-right: 25px;
display: inline;
float: right;
}
#fullName {
display: inline;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
/* new (tweak value to your benefit) */
margin-left: -86px;
}
#job {
display: inline;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 40px;
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div id="allBody">
<div id="image">
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</div>
<div id="fullName">Billy Staples</div>
<div id="job"><i>Programmer</i></div>
<div id="line"></div>
</div>
Or all inline:
#allBody {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
margin-right: 15px;
display: inline;
}
#line {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
margin-right: 25px;
display: inline;
float: right;
}
#fullName {
display: inline;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
display: inline;
float: right;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
/*padding-top: 40px;*/
line-height: 2.2;
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div id="allBody">
<div id="image">
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</div>
<div id="fullName">Billy Staples</div>
<div id="job"><i>Programmer </i> </div>
<div id="line"></div>
</div>