在内容中对齐div，同时在页脚中将内容从上到下保留

Question

很抱歉，如果这是重复的，但我一直在寻找最后一小时，但无法找到有效的解决方案。

我有三个div需要从左到右排列我的页脚，但div内部的内容需要保持从上到下。这是我制作的样机图片：

我已经尝试inline-block，我已经尝试block，我已经尝试了float，我已经尝试过所有这些，并且其他一些东西，我无法弄清楚。他们仍然从上到下排列。任何帮助将不胜感激，这里是页脚的所有代码的小提琴。

https://jsfiddle.net/kLbtfqp6/

Answer 1

将您的CSS更改为：

.footer {
background-color: #5c0e13;
color: white;
display: inline-block;
width: 100%;
}


.favicon {
display: block;
}

.footernav, .socialmedia {
  width:50%;
  float: left;
}
.footer img {
  width: 10%;
  display:inline-block; 
}
.footer p {
  width: 50%;
  display:inline-block;
}