Bootstrap 3 - Panels next to each other causes weird top margin - html

Question

I have 3 panels with the same width but sometimes not the same height next to each other. When the heights are the same, the panels so line up correctly and there is no weird top margin.
However, when the height differs, some panels get dragged down and start lining up with the panel body? The panel bodies are also not always the same height
My HTML structure looks like this:
<div class="wrapper" data-reactid=".0.1">
<div class="col-sm-4 list" data-reactid=".0.1.0">
<div class="panel panel-default" data-reactid=".0.1.0.0">
<div class="panel-heading clearfix" data-reactid=".0.1.0.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.0.0.0.0">Melodic House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.0.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.0.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.0.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.1">
<div class="panel panel-default" data-reactid=".0.1.1.0">
<div class="panel-heading clearfix" data-reactid=".0.1.1.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.1.0.0.0">Deep House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.1.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.2"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true" data-reactid=".0.1.1.0.0.2.0"></span></button>
</div>
<div class="panel-body" data-reactid=".0.1.1.0.1">
<form class="form-horizontal" data-reactid=".0.1.1.0.1.0">
<div class="form-group" data-reactid=".0.1.1.0.1.0.0">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.0.0">Min Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.0.1"><input type="number" class="form-control" id="minDuration" value="0" data-reactid=".0.1.1.0.1.0.0.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.1">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.1.0">Max Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.1.1"><input type="number" class="form-control" id="maxDuration" value="120" data-reactid=".0.1.1.0.1.0.1.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.2">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.2.0">Days old</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.2.1"><input type="number" class="form-control" id="daysOld" value="60" data-reactid=".0.1.1.0.1.0.2.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.3">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.3.0">Query</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.3.1"><input type="text" class="form-control" id="query" value="" data-reactid=".0.1.1.0.1.0.3.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.4">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.4.0">Sorting</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.4.1">
<select class="form-control" id="sorting" data-reactid=".0.1.1.0.1.0.4.1.0">
<option value="hot" data-reactid=".0.1.1.0.1.0.4.1.0.0">Hot</option>
<option value="likes" data-reactid=".0.1.1.0.1.0.4.1.0.1">Likes</option>
<option value="plays" data-reactid=".0.1.1.0.1.0.4.1.0.2">Plays</option>
<option value="date" data-reactid=".0.1.1.0.1.0.4.1.0.3">Date</option>
</select>
</div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.5">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.5.0">Player Height</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.5.1"><input type="number" class="form-control" id="height" value="166" data-reactid=".0.1.1.0.1.0.5.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.6">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.6.0">Track limit</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.6.1"><input type="number" class="form-control" id="limit" value="10" data-reactid=".0.1.1.0.1.0.6.1.0"></div>
</div>
<button class="btn btn-default pull-right" type="button" data-reactid=".0.1.1.0.1.0.7">Update</button>
</form>
</div>
<ul class="list-group" data-reactid=".0.1.1.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.2">
<div class="panel panel-default" data-reactid=".0.1.2.0">
<div class="panel-heading clearfix" data-reactid=".0.1.2.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.2.0.0.0">Tropical House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.2.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.2.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.2.0.2">
...
</ul>
</div>
</div>
</div>
(Sorry for the React clutter)
How do I get them all to line up at the top instead of the bottom?

Answer 1

I was not able to reproduce this from your code snippet, but this behavior is observed when using display:table-cell, in such cases a vertical-align: top aligns them at the top.