-webkit-column-count дает с неожиданными результатами

Поэтому я использую -webkit-column-count на ap-теге, который содержит несколько тегов span. Каждый пролет содержит ОДИН букву.

Между тегами span есть еще один диапазон, который можно перетащить, чтобы пользователь мог перетащить его туда, куда он хочет.

Проблема начинается, когда пользователь бросает ее на край тега p.

Когда это происходит, изображение вырезается из кадра.

Не могу понять, почему..

Единственное, что я вижу, это когда я удаляю z-index из диапазона, который можно перетащить, он внезапно работает хорошо, а второй диапазон для перетаскивания сойдет с этой позиции.

Посмотрите пример JSFiddle

Это мой HTML-код:

<div>
<p class="two_columns">
<span class="ui-draggable">&nbsp;</span>
Lorem ipsum sit amet, consectetur adipiscing sdfsdf consectetur adipiscing sdfsdf 
consectetur adipiscing sdfsdf elit. Praesent rhoncus tellus purus
<span class="ui-draggable">&nbsp;</span>, utfacilisis ipsum posu ere eget. Cras
susciconsectetur adipiscing sdfsdf consectetur adipiscing sdfsdfdio.</p>
</div>

И это мой css:

div {
    width: 80%;
    margin: 20px auto;
}

p {
    overflow: visible !important;
    margin: 0;
    -webkit-column-count: 2;
}

.ui-draggable {
    text-indent: -9999px;
    display: inline !important;
    z-index: 100;
    cursor: pointer;
    position: relative;
    font-size: 0;
    line-height: 0;
}
.ui-draggable::after {
   position: absolute;
content: '';
width: 24px;
height: 30px;
background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLBPLYyDEATQHLjBBl5UD-pSD9PI5rv_EAElcSPT7HGk2LKSKeAVkgCa-o") no-repeat;
cursor: pointer;
left: -10px;
top: -20px;
background-size: 100%;
}