对齐内联块部分中的文本

Question

我正在尝试创建聊天网站。我创建了3个帧（消息，用户列表，撰写）。但我的布局有3个问题（内联块）。

您可以在此处查看我的问题：

我试图：

1. 将所有消息放在框架的底部
2. 对齐消息框和用户列表（我不明白为什么框架＆＃34;联系人框＆＃34;不在容器顶部）
3. 删除顶部两个框和撰写框之间的可用空间。 （我不明白这里的免费空间在哪里）

如果可能的话，我想坚持使用内联块方法。

HTML：

<section id="mainframe">
    <article id="messagebox">
        <p class="send">Message envoyé</p>
        <p class="received">Message reçu</p>
        <p class="send">Message envoyé</p>
        <p class="received">Message reçu</p>
    </article><!--
    --><aside id="contactbox">
        <p>Contact1</p>
        <p>Contact2</p>
        <p>Contact3</p>
    </aside><!--
    --><aside id="composebox">
        <p>Je taperai mon message ici !</p>
    </aside>
</section>

CSS：

#mainframe{
    box-sizing: border-box;
    border: 1px solid white;
    vertical-align: top;
}

#mainframe p{
    display: inline-block;
    width: 100%;
    margin: 0;
    //border: 1px solid #009999;
}

#mainframe #messagebox{
    display: inline-block;
    box-sizing: border-box;
    width: 85%;
    border-right: 1px solid white;
    height: 500px;
}

#mainframe #contactbox{
    box-sizing: border-box;
    display: inline-block;
    width: 15%;
    // vertical-align: top;
    height: 500px;
    text-align: right;
}

#mainframe #composebox{
    box-sizing: border-box;
    border-top: 1px solid white;
    display: inline-block;
    width: 100%;
}