确保左侧的元素与右侧的框（桌面上）完美对齐的最佳方法是什么？现在底部似乎存在差距。似乎无法弄清楚......
jsfiddle here：https://jsfiddle.net/kqf6vubr/1/
<div class="row" style="margin-bottom: 5em;">
<div class="col-sm-5 col-md-5" style="height: 300px">
<div class="row">
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/275x275" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-sm-7 col-md-7 panel-body" style="background-color: #ccc; padding: 2em">
<h3 style="margin-top: 0px; margin-bottom: 1em">Brand Name</h3>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="fluid-media">
<iframe src="https://www.youtube.com/embed/QyIIeQbL1Zo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="col-sm-6 col-md-6">
Description text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie libero quis hendrerit blandit.
</div>
</div>
<div class="row" style="margin-top: 1em; margin-left: 1px">
{ Watch Time } | { Views } | { Rating }
</div>
</div>
</div>