Html 我如何像这样对齐我的div？

这是我努力实现的一个形象：

这就是我目前拥有的：

有人知道我如何把“Jan”和“schreef om 15 Januari 2013 om 12:32”部分放在一行上，紧挨着图片顶部，下面是lorem ipsum，最后是图片下面的“Footer”部分吗

这是我的密码：

    <aside class="previewPost" id="HTMLPreview">
                  <article>
                    <div id="imageDiv">
                        <img src="img/avatar.png" alt="Avatar"  width="150" height="150" id="imageHTML"/>
                    </div>

                    <div id="firstNameDiv">
                        Jan
                    </div>

                    <div id="dateDiv">
                        schreef om 15 Januari 2013 om 12:32
                    </div>

                    <div id="postDiv">
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    </div>

                    <div id="fullname">
                    Jan met de korte achternaam (24)
                    </div>

                    <div id="workDiv">
                    student
                    </div>


                </article>
            </aside>            

有人能帮我一下吗？

“一月”和“2013年一月十五日凌晨12:32”分为两个不同的部分。如果希望它们位于同一行，只需添加

display:inline块

#firstNameDiv, #dateDiv{
     display: inline-block   
}

#firstNameDiv, #dateDiv{
     display: inline-block   
}