Looking for some help with a bootstrap panel design. I am trying to align a heading title to the left and a select element along with a date range input to the right of the panel heading, vertically aligned in the middle. While I have made progress on this, the issue lies with the vertical alignment of the select item.
https://i.stack.imgur.com/d9hrD.png
If you'd like to take a look at my code on a fiddle, here is the link: https://jsfiddle.net/prxbl/5ca3xo0b/8/
HTML
<div class="panel panel-default">
<div class="panel-heading" id="comenzi-chart">
Heading
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
<div class="select-chart-type">
<select class="form-control">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</div>
</div>
</div>CSS
.input-daterange {
width: 250px;
bottom: 5px;
float: right;
}
.select-chart-type {
padding-right: 10px;
float: right;
}
.select-chart-type select {
padding: 5px 10px;
height: 30px;
}I believe there might be a better way to approach this layout. If you have any suggestions on how to achieve the desired result - inserting buttons/selects/inputs in the panel heading, following each other, floating right, and being vertically aligned in the middle - please share your insights!
Thank you!