Q:

Write paragraph in a bottom of a div

I am trying to build something like chat, I want that what the user input inside the text-area will show up in the bottom of a specific div, and the older message above him. 
I tried some stuff but it didn't work out. 
#chatlog {
    display: table-cell;
    vertical-align: bottom;
    border: 1px solid #f00;
    max-height: 500px;
    table-layout: fixed;
    overflow-y: scroll;
    background-color: #00FFFF;
    width: 1400px;
    height: 500px;
}

this is the html code:
<div class="chat-log-wrapper">
    <div id="chatlog"></div>
</div>

<div class="input-text">
    <div class="area">
        <textarea rows="2" type="text" id="message_input">
        </textarea>
        <button id="send-message">send</button>
    </div>
</div>

javascript (recieves message from other client and append it):
socketio.on("message_to_client", function (data) {
    $('#chatlog').append("<p>"+data["message"]+"</p>")
});

It seems that the display:table-cell is ruining the overflow-y.

A:

You can as well take a look at display:flex; and flex-direction:column-reverse;. 
DEMO
Some more info here in a tutorial : http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
and at W3C : (latest draft?)  http://dev.w3.org/csswg/css-flexbox/

