Angular Material md-select multiple align horizontally

Question

I am using Angular Material md-select with the multiple flag

<div layout="row"
  <md-input-container class="md-block" flex-gt-sm>
    <label>Pick State</label>
    <md-select multiple flex ng-model="main.selectedData.State">
      <md-option ng-repeat="(key, value) in main.State" value="{{value.value}}">
        {{value.display}}
      </md-option>
    </md-select>
  </md-input-container>
</div>

When I select my multiple options, everything works as expected on the controller end, but in the view my options stack vertically.

I would like to list them horizontally. So instead of:

AR,
CA

I would get:

AR, CA

I think the problem is that the rendered DOM comes out like this:

<md-select-value class="md-select-value" id="select_value_label_1">
  <span>
    <div class="md-container">
      <div class="md-icon"></div>
    </div>
    <div class="md-text ng-binding">
        AR
    </div>
    ,
    <div class="md-container">
      <div class="md-icon"></div>
    </div>
    <div class="md-text ng-binding">
        CA
    </div>
  </span>
  <span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>

So if I try to add my own CSS to float: left or something like that, I get this:

I have reported this on Github as well , but I'm not sure they consider it a bug, so I am trying to find a work around short of rewriting or altering the module itself.

Answer 1

css:

    ._md-container{
      display: inline-block;
    }

http://codepen.io/nsuthar0914/pen/pbgxWo