Bootstrap Gap Between Columns - html

Question

I use bootstrap on my current project, it's working fine but only one glitch:
I have 3 col-sm-6 next to each other, when the second col-sm-6 is longer than the first, third col-sm-6 moves to left and a gap appears between first and third one.
I have 2 points to ask about:
Is it possible / how to remove that gap.
Is it possible / how to fix the third .col-sm-6 .tasks-panel to left.
Here is 2 images demonstrate what problem I have:
Second col-sm-6 is short:
Second col-sm-6 is longer than the first:
My html structure goes like this:
<h4><span data-head-year></span> <span data-head-month></span></h4>
<a class="pull-right" id="today"><div class="btn btn-primary" style="margin:3px">Today</div></a>
</div>
<hr style="margin: 20px 0"/>
<div class="day-headers">
<div class="day header">Mon</div>
<div class="day header">Tue</div>
<div class="day header">Wed</div>
<div class="day header">Thu</div>
<div class="day header">Fri</div>
<div class="day header">Sat</div>
<div class="day header">Sun</div>
</div>
<div class="days" data-group="days">
<!-- the place where days will be generated -->
</div>
</div>
<!-- Responsive calendar - END -->
</div>
Outlets to visit
<div class="template outlet-wrapper" style="display: none">
<div class="outlet-header">
<div class="col-xs-6">
<h4 class="outlet-name"></h4>
</div>
<div class="col-xs-6 text-right">
<h5 class="tools" style="display: none">
<i class="icon-repeat repeat"></i>
<span class="glyphicon glyphicon-remove remove"></span>
</h5>
</div>
</div>
<div class="clearfix"> </div>
<div class="outlet-body">
<div class="col-sm-6">
Time to reach: <spane class="time-to-reach"></spane>
</div>
<div class="col-sm-6">
Time to leave: <span class="time-to-leave"></span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary pull-right" id="add-outlet"> Add Visit </button>
<div class="clearfix"></div>
</div>
</div>
Tasks List
</div>
<div class="panel-footer">Panel Footer</div>
</div>
Sorry for bad format, I don't know why stackoverflow editor breaks my html code; I have tried (Ctrl + K, <pre><code>) but none of them worked !
If you're interested in seeing my code properly, please show my post in editor.
Thanks in advanced.
Update:
A Codepen is available here, press add visit to see what happens if second column is long.

Answer 1

Have you tried to apply "pull-right" to the "col-sm-6" container of "panel panel-primary outlets-panel"?
<div class="col-sm-6 pull-right">
<div class="panel panel-primary outlets-panel">
<div class="panel-heading">
...
Forked Codepen
You'll still have to fix the above space of the "tasks list" container, but that should be trivial.