浮动div中文本的垂直对齐方式

Question

我知道这个问题已经被问了十几次 - 但是我的情况并不适用。我有以下代码，并希望将文本对齐div的底部。

Codepen：http://codepen.io/anon/pen/AzmyE

HTML：

<footer class="clearfix">
  <div class="footer-logo">
  <img src="img/logo.png" height="60" alt="logo"/>
  </div><!-- /footer-logo -->
  <div class="footer-name">
    <span>Name Name</span><br/>
    <span class="text-gold">Creation</span>
  </div><!-- /footer-name -->
  <div class="footer-contact">
    <strong class="text-gold">T</strong> +49 (0) 1234456678<br />
    <strong class="text-gold">E</strong> test@test.de
  </div><!-- /footer-contact -->
</footer>

CSS：

footer {
    height: 70px;
}

    footer p {
        margin:0;
    }

    .footer-logo, .footer-name, .footer-contact {
        float:left;
        height:100%;
        display: table-cell;
        vertical-align: bottom;
    }

    .footer-name, .footer-contact {
        margin-left: 2%;
    }

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

我也尝试过将footer-name / footer-contact类设置为position：relative;，在其中创建一个额外的div并将其设置为position：absolute;底部：0;但是这样做不正常，因为文本被包装了。

有人有解决方案吗？谢谢！