сортируемый - элементы изменяют верхнее поле при перетаскивании

Question

Почему верхнее и / или нижнее поле child изменяется при их перетаскивании?
Мне нужно, чтобы они оставались встроенными.

$('.parent').sortable({
	containment: "parent",
	axis: "x",
});

.parent{
text-align:center;
}

.child{
display:inline-block;
padding:2px 9px;
border-radius:9px;
background:gold;
margin:0 9px;
cursor:pointer;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='parent'>
<div class='child'>323</div>
<div class='child'>525</div>
<div class='child'>727</div>
</div>

Answer 1

нам этот стиль

.parent > div { float: left; margin-left: 10px; background : gold; border-radius : 10px; padding:2px 9px; }

$('.parent').sortable({
	containment: "parent",
	axis: "x",
});

 .parent > div { float: left; margin-left: 10px; background : gold; border-radius : 10px; padding:2px 9px; }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='parent'>
<div class='child'>323</div>
<div class='child'>525</div>
<div class='child'>727</div>
</div>

Answer 2

Просто добавьте vertical-align: top; к .child

$('.parent').sortable({
	containment: "parent",
	axis: "x",
});

.parent{
text-align:center;
}

.child{
display:inline-block;
padding:2px 9px;
border-radius:9px;
background:gold;
margin:0 9px;
cursor:pointer;
vertical-align: top;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='parent'>
<div class='child'>323</div>
<div class='child'>525</div>
<div class='child'>727</div>
</div>