place all child div at bottom of the parent div

Question

<div id="admin_chatRoom">
   <div class="msg_box admin-msg-box 1444055123841" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444055123841" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444055193984" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444055193984" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444112696240" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444112696240" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444123878925" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444123878925" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap" style="display: none;">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
</div>

Css:

.msg_head{
    background:#f39c12;
    color:white;
    padding:15px;
    font-weight:bold;
    cursor:pointer;
    border-radius:5px 5px 0px 0px;
}
#admin_chatRoom .msg_head{
   background: #d35400
}

.msg_box{
    width:250px;
    background:white;
    border-radius:5px 5px 0px 0px;
}
.admin-msg-box {
    margin-right: 7px;
}
.client_area,#admin_chatRoom{
    position:fixed;
    bottom:-5px;
}
.msg_head{
    background:#3498db;
}

.msg_body{
    background:white;
    height:200px;
    font-size:12px;
    padding:15px;
    overflow:auto;
    overflow-x: hidden;
}
.msg_input{
    width:100%;
    border: 1px solid white;
    border-top:1px solid #DDDDDD;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
}
#admin_chatRoom{
    width:100%;

}

Jquery:

 $(document).on("click", ".msg_head", function () {
        $(this).next('.msg_wrap').slideToggle('slow');
    });

This works fine for single chatbox. when .msg_wrap hide then .msg_head goes to the bottom. But for more than one, .msg_head of hidden chat box float upper level of shown chat-box. I would like to refer the image to show my situation:

In the above picture all hidden msg_head are floating at the level of active chat box. But I want all there head of hidden chat box at the bottom. Any idea? I am sorry if it is such a question which should not be asked here.

Answer 1

You need to use the following css

.admin-msg-box {
    margin-right: 7px;
    position: absolute;
    bottom: 0;
    right:0;
}

And then use the JS to set the right position of the box