JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class="container">
<form class="form-horizontal col-lg-6">
    <h3>Right Aligned</h3>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">
          <i class="icon-headphones"></i>
        </span>
      </div>
    </div>
    <br>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon">Test</span>
      </div>
    </div>
    <br>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go</button>
        </span>
      </div>
    </div>
    <br>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Again</button>
          <button class="btn btn-default" type="button">Go</button>
        </span>
      </div>
    </div>
    <br>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-addon"></span>
      </div>
    </div>
    <h3>Left Aligned</h3>
    <div class="col-lg-12">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="icon-headphones"></i>
        </span>
        <input type="text" class="form-control">
      </div>
    </div>
    <br>
    <div class="col-lg-12">
      <div class="input-group">
        <span class="input-group-addon">Test</span>
        <input type="text" class="form-control">
      </div>
    </div>
    <br>
    <div class="col-lg-12">
     ...

CSS

.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before,
.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  margin: auto;
  top: 0;
  bottom: 0;
  z-index: 1000;
}
.input-group .input-group-addon:last-child,
.input-group .input-group-btn:last-child {
  border-left: 1px solid red;
}
.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before {
  border-right-color: red;
  right: 0;
}
.input-group .input-group-addon:not(:last-child),
.input-group .input-group-btn:not(:last-child) {
  border-right: 1px solid red;
}
.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
  border-left-color: red;
  left: 0;
}