JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<h5>Form validator styles bleed into nested form groups</h5>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status" />
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>

  <div class="form-group">
    <label class="control-label" for="input2">Input</label>
    <input type="text" class="form-control" id="input2" aria-describedby="input2Status" />

    <div class="form-group has-feedback">
      <label class="control-label" for="input3">Input</label>
      <input type="text" class="form-control" id="input3" aria-describedby="input3Status" />
    </div>
  </div>
</div>

CSS

.form-group > .form-group {
    padding-left:20px;
}