Как поменять элемент метки со стороны слева

Question

У меня есть форма флоры , и я не могу заставить элемент (расположенный на flo-select:before на css) переместить его в левую сторону.

Вот что у меня есть сейчас:

И вот что я хочу достичь:

Вот код HTML:

Вот прямая трансляция: Демонстрация в реальном времени

.floraforms .flo-select>select::-ms-expand {
  display: none
}

.floraforms .flo-select:after,
.floraforms .flo-select:before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 15;
}

.floraforms .flo-select:before {
  top: 2px;
  right: 2px;
  width: 34px;
  bottom: 2px;
  background: #F2F4FA;
  border-left: 1px solid #d3dae7;
  -webkit-border-radius: 0 1px 1px 0;
  -moz-border-radius: 0 1px 1px 0;
  -o-border-radius: 0 1px 1px 0;
  border-radius: 0 1px 1px 0;
}

<div class="elem-group colm colm6">
  <label class="field flo-select">
    <select id="month" name="month">
      <option value=""> Select month </option>
      <option value="01">01 - Jan</option>
      <option value="02">02 - Feb</option>
      <option value="03">03 - Mar</option>
      <option value="04">04 - Apr</option>
      <option value="05">05 - May</option>
      <option value="06">06 - Jun</option>
      <option value="07">07 - Jul</option>
      <option value="08">08 - Aug</option>
      <option value="09">09 - Sep</option>
      <option value="10">10 - Oct</option>
      <option value="11">11 - Nov</option>
      <option value="12">12 - Dec</option>
    </select>
    <i class="arrow double"></i>                             
  </label>
</div>