Put the contents of a list item at the end in css?

Question

I am having a problem placing the contents of a list item below the bottom line.

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 finish 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:

jsFiddle reference

Description
When I click on only one heading, the paragraph and heading are hidden. (OK) But when I click on another heading, both of them jump up again.

any help on this.
Thanks.

---

UNITED AND SOLVED:
Ok, I was hoping someone could help me solve this problem with css.
But I did the trick using jQuery. it works. but I don’t know if it’s good or not.

Here is the code:
Updated Code

Answer 1

The problem with vertical alignment is that it aligns the element with its neighboring inline siblings. When they are both minimized because they are the same height, they appear inside each other.

I would recommend using position: absolute; and bottom: 0; fixed ul height, although for your current style you will need a couple of settings.

EDIT:

How about placing ul in a container div and absolute positioning ul at the bottom of this.

Demo

The only difference is the div around 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 this works. :) I tried this code by removing the new jQuery part in the updated code and adding this.