Css 将文本放在底部，而不是另一个文本的正下方

我使用不同的DIV标记作为表，我想在content DIV的底部获得另一个DIV

<div class="table">
    <div class="table-row">

        <div class="table-information">
            Content
        </div>

        <div class="table-content">
            More content

            <div class="extra">
                Here's the extra content
            </div>
        </div>

    </div>
</div>

如你所见，我有

垂直对齐：底部用于
extra
类。我希望该DIV中的内容位于底部，而不是文本的正下方
更多内容
。但当我尝试这个解决方案时，什么都没有发生


我怎样才能解决这个问题

提前感谢。
这里有一种方法可以实现这一点

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
    position:relative;
    width:150px;
}
.extra {
    vertical-align: bottom;
    bottom:0;
    position:absolute;
}

我通过将相对位置添加到容器
表内容中，然后将绝对位置底部添加到
额外的


这是一个


另一种方式是这样的：

.extra {
    vertical-align: bottom;
    display:table-cell;
    height: 150px;
    width:150px;
} 

下面是第二个选项的示例。

从这两个选项中，我个人会选择第一个，
但是您应该注意固定的宽度和高度（因为绝对定位）。
垂直对齐：底部
适用于
.extra
的内容，而不是
div
本身。Ok。如何制作DIV及其位于
表内容
DIV标记底部的内容？非常好！谢谢我会尽快接受你的答复。我将使用您的第一个解决方案，并且我将注意固定的高度和宽度：）
.extra {
    vertical-align: bottom;
    display:table-cell;
    height: 150px;
    width:150px;
}