javascript - 将列表项的内容放在CSS的底部？

我有一个关于将列表项的内容置于底部，基线的问题。

看看这个 :

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

和JQUERY部分:

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

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

});

和最终的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;}

这是jsFiddle链接:

link to jsFiddle

说明
当我仅单击一个标题时，该段落将隐藏并且标题变为底部。 ( 好 )
但是，当我单击另一个标题时，它们都再次跳到顶部。

关于此的任何帮助。
谢谢。

已编辑并已解决:
好吧，我希望有人可以帮助我以CSS方式解决此问题。
但是我使用了jQuery。这是工作。但我不知道这是不是一个好方法。

这是代码:
Updated Code

最佳答案

垂直对齐的问题在于它使元素与其相邻 sibling 的inline对齐。当它们由于高度相同而被最小化时，它们会彼此内联。

我建议使用固定高度position: absolute;的bottom: 0;和ul，尽管这将需要对当前样式进行一些调整。

编辑:

如何将ul放在容器div中，并将ul绝对定位到该容器的底部。

Demo

唯一的区别是ul周围有一个div，我更改了以下样式:

.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;
}