2 inline labels for 4 inline inputs with Bootstrap

Question

I want a row with 4 inputs, with 2 groups of 2 inputs and each group has one label.

My current code:

<form>
<div class="row">
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
        <input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
    </div>
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="mondayend">&nbsp;</label>
        <input type="time" class="form-control" id="mondayend" name="mondayend" required>
    </div>
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
        <input type="time" class="form-control" id="monday2start" name="monday2start">
    </div>
    <div class="col-md-3 form-group">
        <label class="font-weight-bold" for="monday2end">&nbsp;</label>
        <input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
    </div>
</div>

How do I get a form row like that? It kind of works, but the inputs with an empty label are higher than the inputs with label.

Answer 1

Try enclosing the "form-group" in a separate div:

<form>
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
                <input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="mondayend">&nbsp;</label>
                <input type="time" class="form-control" id="mondayend" name="mondayend" required>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
                <input type="time" class="form-control" id="monday2start" name="monday2start">
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label class="font-weight-bold" for="monday2end">&nbsp;</label>
                <input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
            </div>
        </div>
    </div>
</form>