Input Addons

adons.html

<!-- appending -->
<div class="InputAddOn">
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

<!-- prepending -->
<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
</div>

<!-- both -->
<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

<style>
.InputAddOn{
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:1em
}
.InputAddOn-field{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -moz-box-flex:1;
    -ms-flex:1;
    flex:1
}
.InputAddOn-field:not(:first-child){
    border-left:0
}
.InputAddOn-field:not(:last-child){border-right:0}
.InputAddOn-item{
    background-color:rgba(147,128,108,.1);
    color:#666;font:inherit;font-weight:400
}
.InputAddOn-field,.InputAddOn-item{
    border:1px solid rgba(147,128,108,.25);padding:.5em .75em
}

.InputAddOn-field:first-child,.InputAddOn-item:first-child{
    border-radius:2px 0 0 2px
}

.InputAddOn-field:last-child,.InputAddOn-item:last-child{
    border-radius:0 2px 2px 0
}
</style>