html - CSS页脚格式

我的CSS页脚中有几个问题。请在“整页”中运行此代码段，以查看其在较大的显示器上的布局（我将在稍后进行响应。现在，请使用“整页”）。

.small col-md-3 {
  font-size: .8em
}
.footer-distributed {
  background-color: #34385E;
  width: 100%
}
.footer-distributed .footer-links {
  color: #ffffff;
}
.footer-distributed .footer-links a {
  line-height: 1.8;
  color: inherit;
  padding: 0 2em;
}
.footer-distributed .footer-left-bar {
  border-left: solid;
  color: #FFFFFF;
}
footer {
  position: fixed;
  bottom: 0;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>

<body>
  <footer class="footer-distributed">
    <div class="row" style="height: 1em"></div>
    <div class="row">
      <div class="col-md-3">
        <p class="footer-links">
          <a href="#">Link Number 123</a>
          <a href="#">Link Number 2</a>
          <a href="#">Link Number 3</a>
          <a href="#">Link Number 4</a>
        </p>
      </div>
      <div class="col-md-6 footer-left-bar">
        <div class="row footer-links">
          <div class="col-md-6">
            <p>This information is</br>
              always three</br>
              lines long
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3 footer-left-bar">
        <div class="row footer-links">
          <div class="col-md-6">BRANDING 1</div>
          <div class="col-md-6">BRANDING 2</div>
        </div>
      </div>
    </div>
    <div class="row" style="height: 1em"></div>
  </footer>

</html>

左侧的4个链接。我希望它们在2x2网格的左对齐单元格中，无论文本在其中有多长时间。如您所见，因为链接号123太长，所以将链接2向右推。
右侧的2品牌链接。我希望它们并排且垂直居中，以使白色分隔条与中心列左侧较长的白色分隔条匹配。

有人可以提供有关如何完成此操作的任何提示吗？谢谢！！

最佳答案

嗯...我想评论/答案已被删除。但是，效果很好！建议是：

在左侧使用2/2的行和列网格来隔开
项目。
在中心块的两侧使用白色边距线，
而不是尝试在中心和右边做左边距线
大块。

垂直居中仍然不是很好，所以我可能会用其他答案来解决这个问题。谢谢！