CSS display size is changed due to length of text - html

Question

I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.
However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.
Its source is on
http://jsfiddle.net/RXrvZ/1883/
and the main part of CSS is:
.post-container {
margin: 20px 20px 0 0;
border: 1px dotted #333;
overflow: auto;
}
.greenbox {
display: block;
border: 1px dotted #383;
width: 100%;
}
.redbox {
display: inline-block;
border: 1px dotted #f33;
width: 70%;
height: 100px;
}
.redbox10 {
display: inline-block;
border: 1px dotted #f33;
width: 20%;
height: 100px;
}
And its HTML code is like:
<div class="greenbox">
<div class="redbox10">
<img src="#">
</div>
<div class="redbox">
One Line Text
</div>
</div>
How can I place the top line same whatever I type in?
Thanks for your help.

Answer 1

Set the left column to align at the top.
.redbox10 {
vertical-align: top;
}
JSfiddle

Answer 2

You need to specify vertical align to be top:
.redbox, img{
display: inline-block;
vertical-align: top;
}
Here's the updated demo

Answer 3

you should use float:
.redbox {
float: left;
}
.redbox10 {
float: left;
}
you can give them a margin for some space.
Demo
Demo With Margin

Answer 4

This could be rather simplified if made using a table.
I hope this helps.
.mainTable{
padding: 10px;
}
.outerRow{
padding: 10px;
}
.imageColumn{
border: 1px solid;
padding: 10px;
vertical-align: top;
}
.textColumn{
border: 1px solid;
padding: 10px;
}
<div class="container">
<table class="mainTable">
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
One Line Text
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Two Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Three Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf hello hello hello hello hello hellohellohellohellohellohello
</td>
</tr>
</table>
</div>