Could someone please assist me with form inline in Bootstrap?
I am trying to ensure that all inputs are of the same height (or centered), but I'm facing an issue when a validation message is displayed. DEMO: http://codepen.io/Tursky/pen/gpvgBL?editors=100
Additionally, I would like to have this message appear under each input field.
Thank you for your assistance.
<form class="col-xs-12">
<div class="form-inline row" style="padding:25px;">
<div class="form-group has-feedback">
<label class="control-label" for="playerId">*Player ID</label>
<input type="text" class="form-control player-input" id="playerId" name="playerId">
<span id="playerIdError" class="help-block" >ERROR</span>
</div>
<div class="form-group has-feedback">
<label class="control-label" for="playerId">*Player ID</label>
<input type="text" class="form-control player-input" id="playerId" name="playerId">
<span id="playerIdError" class="help-block" ></span>
</div>
<div class="form-group has-feedback">
<label class="control-label" for="playerId">*Player ID</label>
<input type="text" class="form-control player-input" id="playerId" name="playerId">
<span id="playerIdError" class="help-block" ></span>
</div>
<div class="form-group has-feedback">
<label class="control-label" for="playerId">*Player ID</label>
<input type="text" class="form-control player-input" id="playerId" name="playerId">
<span id="playerIdError" class="help-block" ></span>
</div>
</div>