Long text causes inline element to display below - css

Question

I have to inline-block elements. I want to display side by side the two elements. When the text of the link in the second block element displays on two lines because of a long text (word wrap), the link parent element displays on the second line.
In the fiddle bellow the second div.job_content block should display like the first one (side by side).
Any Idea?
Here is the fiddle:
.content {
width: 300px;
}
.job-content {
border: 1px solid red;
margin: 20px 0;
}
.job-thumbnail {
display: inline-block;
}
.job-thumbnail img {
margin: 10px 10px 5px;
max-width: none;
border: none;
}
.job-title {
display: inline-block;
vertical-align: top;
}
<div class="content">
<div class="job-content">
<div class="job-thumbnail">
<img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
</div>
<div class="job-title">
Small text
<dl class="">
<dt class="study_level">Niveau requis:</dt>
<dd>
bac ou équivalent
</dd>
</dl>
</div>
</div>
<div class="job-content">
<div class="job-thumbnail">
<img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
</div>
<div class="job-title">
<a href="" title="Permalien vers Inspecteur(trice) du permis de conduire et de la sécurité routière" rel="bookmark">Large text du permis de conduire et de la
sécurité routière</a>
<dl class="">
<dt class="study_level">Niveau requis:</dt>
<dd>
bac ou équivalent
</dd>
</dl>
</div>
</div>
</div>
Here is a much more simple example:
.wrapper {
border: 1px solid red;
}
.thumbnail {
display: inline-block;
margin-right: -80px;
width: 80px;
}
.text {
display: inline-block;
vertical-align: top;
width: auto;
padding-left: 80px;
}
<div class="wrapper">
<img width="80" height="80" class="thumbnail" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
<a href="#" class="text">
This text shouldn't be pushed downwards when the "result" frame is resized
</a>
</div>
Simply resize the result frame to see the text being pushed downwards... I have this done this before, I don't get what is wrong...

Answer 1

Check out this jsfiddle
.content {
width: 700px;
}
.job-content {
display:inline-block;
border: 1px solid red;
margin: 20px 0;
}
.job-thumbnail {
display: inline-block;
}
.job-thumbnail img {
margin: 10px 10px 5px;
max-width: none;
border: none;
}
.job-title {
display: inline-block;
vertical-align: top;
width:190px;
}

Answer 2

Is there any reason why you're running with inline-block?
If you float the elements it is much easier to do - http://jsbin.com/ojoloq/1/edit
UPDATE
Remove the inline-block and use floats will do the trick (http://jsfiddle.net/DxTg2/12/)
.wrapper {
border: 1px solid red;
float:left;
}
.thumbnail {
float:left;
margin-right: -80px;
width: 80px;
}
.text {
float:left;
vertical-align: top;
width: auto;
padding-left: 80px;
}