JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="input-group address-select">
  <select id="select_delivery" class="btn btn-default btn-lg btn-block form-control dropup">
    <option>1</option>
    <option>2</option>
    <option>3</option>

  </select>
  <span class="input-group-addon">
            <span class="glyphicon glyphicon-menu-up red"></span>
  </span>
</div>

<!--                   my attempt      -->
<br>
<br>
<br>
<div class="address-select">
  <select id="select_delivery2" class="btn btn-default btn-lg btn-block form-control dropup">
    <option>1</option>
    <option>2</option>
    <option>3</option>

  </select>
  <span class="input-group-addon delivery-trig">
            <span class="glyphicon glyphicon-menu-up red"></span>
  </span>
</div>

CSS

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearence: none;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

.red {
  color: red;
}

#select_delivery {
  color: #333;
  padding: 10px;
}


/* css for the 2nd */

#select_delivery2 {
  background: transparent;
  color: #333;
  z-index: 2;
  padding: 10px;
}


}
.delivery-trig {
  position: relative;
  float: right;
  border-left: 1px solid lightgrey;
  top: -30px;
  height: 31px;
}