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">
  <h3>Right Aligned</h3>
  <form class="form-horizontal col-lg-12">
    <div class="col-lg-12">
      <div class="input-group input-group-caret">
        <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-group-caret">
        <input type="text" class="form-control">
        <span class="input-group-addon"><i>Test</i></span>
      </div>
    </div>
    <br>
    <div class="col-lg-12">
      <div class="input-group input-group-caret">
        <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-group-caret">
        <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-group-caret">
        <input type="text" class="form-control">
        <span class="input-group-addon"></span>
      </div>
    </div>
  </form>
  <h3>Left Aligned</h3>
  <form class="form-horizontal col-lg-12">
    <div class="col-lg-12">
      <div class="input-group input-group-caret">
        <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...

CSS

.input-group.input-group-caret span:after,
.input-group.input-group-caret > input + span:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 10px solid transparent;
}
.input-group.input-group-caret > input + span:before {
  border-right-color: #cccccc;
  margin-left: -20px;
}
.input-group.input-group-caret > input + span:empty:before {
  margin-left: -44px;
}
.input-group.input-group-caret > input + span:after {
  border-left-color: transparent;
}
.input-group.input-group-caret span:after {
  border-left-color: #cccccc;
}
.input-group.input-group-caret .input-group-addon {
  padding: 0;
}
.input-group.input-group-caret .input-group-addon i {
  font-style: normal;
  margin-left: 12px;
  padding-right: 12px;
}
.input-group.input-group-caret .input-group-addon:empty {
  padding-left: 24px;
}