菜单有两列 - 每个都有不同的布局（boostrap）

Question

我想建立一个导航菜单。我希望它很高，我想将它水平分成两部分。然后我希望左边的部分与菜单底部对齐。右边的部分应该有导航链接并且是中间对齐的。我希望尽可能减少使用css。 （如果有帮助的话，我也在使用Angular Material和Bootstrap）。这是plunkr。我已经检查了这个checkit，但我正在寻找另一种选择。

<div class="menu container-fluid">
    <md-toolbar class="md-tall">
      <div class="container">
        <div layout="row">
          <!--Left-->
          <div layout="row">
            <md-button aria-label="Settings" class="shownSm">
              <ng-md-icon icon="menu" ng-click="main.small =!main.small" style="fill: #fefefe;"></ng-md-icon>
            </md-button>
            <div layout="column">
              <span flex></span>
              <span>
                  <small>Some name</small>
                </span>
              <span>
                  <small>Something else</small>
                </span>
            </div>
          </div>
          <span flex=""></span>
          <!--Right-->
          <div class="right" layout="column">
            <span flex=""></span>
            <div layout="row" class="hiddenSm">
              <ul class="text-center">
                <span><a href="#/">Item1</a></span>
                <span><a href="#/">Item2</a></span>
                <span><a href="#/">Item3</a></span>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </md-toolbar>
  </div>