I am working on a display where there are 3 checkboxes. When one of these checkboxes is triggered, a message or input field should appear. I got that part working, but the checkbox and the message are not aligned as shown in the image below
As you can see the "Ondertiteling" checkbox is not aligned with the text "Ondertitel enabled".
This is my code (with the toggling of the message ommitted for the question's sake)
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label> <input type="checkbox">Ondertitels</label>
</div>
<div class="checkbox">
<label> <input type="checkbox">Vertaling</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div>Ondertitel enabled</div>
<div>Vertaling enabled</div>
<div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>How can I align the text to be on the same height as the checkbox? Thanks in advance.