select-button result

select-button.css

.select-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  display: inline-block;
}

  /* Случай, при растяжении кнопки на всю ширину */
  .select-button_stretched {
    width: 100%;
  }

  .select-button__select {
    position: absolute;
    /* растягиваем селект на всю доступную ширину и высоту (для этого делали блок как position:relative) */ 
    top: 0;
    left: 0;
    bottom: 0;
    rigth: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    opacity: 0;
    /* Управляем z-index, чтобы сделать прозрачный селект "над" кнопкой */
    z-index: 2;
  }

  .select-button__button {
    z-index: 1;
  }

    .select-button:hover .select-button__button {
      color: #fff;
      border-color: #348de8;
      background-color: #348de8;
    }

    .select-button__select:focus + .select-button__button {
      border-color: #0c59a7;
    }

.button {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    height: 34px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #cbd1d4;
    margin: 0;
    font-size: 14px;
    font-family: inherit;
    line-height: 32px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-transition-property: background-color,color,-webkit-box-shadow;
    transition-property: background-color,color,box-shadow;
    background-color: transparent;
      color: #fff;
    border-color: #509deb;
    background-color: #509deb;
    text-align: center;
}

.button:hover {
    color: #fff;
    border-color: #348de8;
    background-color: #348de8;
}

.button:active {
    color: #fff;
    background-color: #1a7de2;
}

.example {
  width: 400px;
}
.example2 {
  margin-top: 30px;
  width: 100%;
}

select-button.html

<div class=example>
  <div class='select-button'>
    <select class='select-button__select'>
      <option>Выберите вариант</option>
      <option value='1'>Москва</option>
      <option value='2'>Санкт-Петербург</option>
      <option value='3'>Малые Холуницы</option>
    </select>
    <button tabindex="-1" class='select-button__button button'>
        Добавить город
    </button>    
  </div>
</div>

<div class=example2>
  <div class='select-button select-button_stretched'>
    <select class='select-button__select'>
      <option>Выберите вариант</option>
      <option value='1'>Москва</option>
      <option value='2'>Санкт-Петербург</option>
      <option value='3'>Малые Холуницы</option>
    </select>
    <button tabindex="-1" class='select-button__button button'>
        Добавить город
    </button>    
  </div>
</div>