bootstrap3 form has text overlapping with dropdown - html

Question

I am trying to create a form that looks like this:
What I have come up with looks like this. I either can have the dropdown take up the correct amount of space, but then the text is underneath, or have the text next to the dropdown and everything gets smushed.
I'm not sure what I'm doing wrong. Here is the html:
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<div class="form-group">
<select class="liveSyncSchedule form-control"></select>
</div>
<div class="form-group">{{t "templates.scheduler.seconds"}}</div>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
All help is greatly appreciated!

Answer 1

The layout is messed because form-group class is not handled properly. Try this,
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<select class="liveSyncSchedule form-control"></select>
<span>{{t "templates.scheduler.seconds"}}</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
</form>
Thanks!

Answer 2

Here is a simplified fiddle: https://jsfiddle.net/mz1xgr38/
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Fire every</label>
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-md-6">
Seconds
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9 ">
<div class="checkbox">
<label>
<input type="checkbox" />Enabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Persisted
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Misfire policy</label>
<div class="col-sm-9">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</form>