Why item overlap bottom border in jquery-ui sortable?

Question

I am little bit confused with little visual bug which I notice with next my code.

As you can see I have list. When user drag second item and drop it to top, first item goes down to second place. I notice that first item overlap bottom border. Why does this happen? It seems like something wrong maybe with placeholder.

Link: jsfiddle.net

$(function () {
	$("#list").sortable({});
});

.panel{
  margin: 10px;
  border-radius: unset !important;
}
.panel .panel-heading{
  border-radius: unset;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel .panel-body {
    padding: unset;
}
.custom-list-group-item:hover {
    background-color: #DCEDC8;
    color: #424242;
    cursor: pointer;
}
.panel-body .list-group .list-group-item:first-child {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}
.panel .panel-body .list-group .list-group-item:last-child {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}
.panel .panel-body .list-group .list-group-item .pull-right {
    margin-top: -8px;
}
.panel .panel-body .list-group {
    margin-bottom: unset;
}
.panel .panel-body .list-group .list-group-item {
    border: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div class="panel panel-success">
			<div class="panel-heading clearfix">
				<h4 class="panel-title pull-left">Title</h4>
				<div class="btn-group pull-right">
					<a class="btn btn-success">
						<i class="fa fa-plus-circle"></i>
						<span>Create</span>
					</a>
				</div>
			</div>
			<div class="panel-body">
				<div id="list" class="list-group ui-sortable">
        
          <div class="list-group-item custom-list-group-item ui-state-default ui-sortable-handle">
            <span>Great Britain</span>
            <span class="pull-right">
			        <button class="btn btn-danger">
				        <i class="fa fa-ban"></i>
			        </button>
			        <button class="btn btn-warning">
				        <i class="fa fa-pencil"></i>
			        </button>
			        <a class="btn btn-info btn-white" href="">
				        <i class="fa fa-book"></i>
			        </a>
		        </span>
          </div>
  
          <div class="list-group-item custom-list-group-item ui-state-default ui-sortable-handle">
		        <span>South Korea</span>
		        <span class="pull-right">
              <button class="btn btn-danger">
				        <i class="fa fa-ban"></i>
			        </button>
              <button class="btn btn-warning">
                <i class="fa fa-pencil"></i>
              </button>
              <a class="btn btn-info btn-white">
                <i class="fa fa-book"></i>
              </a>
            </span>
          </div>
        </div>
			</div>
		</div>