Put content of a list item to bottom in css?

Question

I have a problem about putting content of a list item to bottom, baseline.

take a look at this :

    <ul>
    <li class="box">
        <div class="close" ></div>
        <div class="head"> Header </div>
        <p class="area">
            This is Paragraph
        </p>
    </li>
    <li class="box">
        <div class="close" ></div>
        <div class="head"> Header </div>
        <p class="area">
            This is Paragraph
        </p>
    </li>
</ul>

And the JQUERY part:

    $( document ).on( "click", "ul li .head", function() {

    $(this).parent('li').toggleClass( 'minimize' );
    $(this).parent('li').children('p').toggle();

});

AND finaly the CSS

ul { position: static; bottom: -4px; width: 1150px;  min-height: 250px; overflow:     hidden; 
}
ul li {
position: relative;
border: 1px solid lightgray;
width: 260px;
background-color: #f2f2f2;
display: inline-block;
margin: 0 2px;
}
ul li .head {
font-weight: bold;
padding: 5px;
background-color: #6D84B4;
color: white;
border: 1px solid #6D84B4;
text-align: right;
}
p.area { padding: 8px; height: 200px; }
.minimize { vertical-align: bottom;}

Here is the jsFiddle link:

link to jsFiddle

Description
When I click on only one header, the Paragraph hides and header goes bottom. ( OK ) But when I click the other header, both of them jumps to top again.

any help about this.
Thanks.

---

EDITED & SOLVED:
Well , I hoped somebody could help me to solve this in css way.
But I made a trick using jQuery. it is working. but I don't know it's a good way or not.

Here is the code:
Updated Code

Answer 1

The problem with vertical-align is that it aligns the element with its inline adjacent siblings. When they are both minimized because they are the same height they appear inline with each other.

I would recommend using position: absolute; and bottom: 0; of the fixed height ul although that will need a couple of tweaks to your current styling.

EDIT:

How about putting the ul in a container div, and absolute positioning the ul to the bottom of that.

Demo

The only difference is a div around the ul and I changed the following style:

.container { 
  position: relative;
  width: 1150px;  
  min-height: 282px; 
  overflow: hidden; 
  border: 1px solid #000;
  padding: 0;
  margin: 0;
}
ul{
  overflow: hidden;
  position: absolute;
  bottom:0;
  padding: 0;
  margin: 0;
}

Answer 2

Add

white-space: nowrap;

to ul

ul { position: static; bottom: -4px; width: 1150px;  min-height: 250px; overflow:     hidden; 
white-space: nowrap;}

Hope it works. :) I tried this code by deleting the new jQuery part in updated code and adding this.