Control Panel

Control Panel allignment issue

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="row row-content">
	<div class="col-xs-12">
		<h3>Control Panel</h3>
	</div>

	<div class="col-xs-12 col-sm-9">
		<form class="form-horizontal" id="control-panel" name="control-panel" role="form">

			<div class="form-group">
				<label class="col-sm-2 control-label">Status</label>
        
				<div  id="statusSelector" class="col-sm-9 btn-group"  data-toggle="buttons">
						<label id="btnEnabled" class="btn btn-success active disabled">
							<input type="radio" name="options" id="option1" autocomplete="off"> Enabled
						</label>
            
						<label id="btnDisabled" class="btn btn-danger">
							<input type="radio" name="options" id="option2" autocomplete="off"> Disabled
						</label>

					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label">Mode</label>
					<div class="col-sm-9">
						<label class="radio-inline">
							<input name="RadioOptions" type="radio" value="option1" checked="checked">Option 1
						</label>
						<label class="radio-inline">
							<input name="RadioOptions" type="radio" value="option2">Option 2
						</label>
					</div>
				</div>

		</form>
	</div>
</div>

CSS

.row-header {
  margin: 0px auto;
  padding: 0px 0px;
}
.row-content {
  margin: 0px auto;
  padding: 50px 0px;
  border-bottom: 1px ridge;
  min-height: 400px;
}


body {
  align: center;
  padding: 50px 0px 0px 0px;
  z-index: 0;
}
.tab-content {
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  padding: 10px;
}
.affix {
  top: 100px;
}