JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<h2>Sortable: Placeholder size not updated at some  zoom levels</h2>
<p>
    <strong>Set browser zoom to 100%</strong><br/>
    Placeholder elements have their height set to match the dragged item.
</p>
<p>
    <strong>Set browser zoom to 110%</strong><br/>
    Placeholder elements do not have a height set and cause the list items to jump around while ordering.
</p>
<ul>
    <li>Pick up the milk</li>
    <li>Submit TPS report</li>
    <li>Make dentist appointment</li>
    <li>Order new red stapler</li>
    <li>Return books to the library</li>
    <li>Buy birthday gift for John</li>
    <li>Take out the trash</li>
    <li>Take over the world</li>
</ul>

CSS

ol { padding: 0; }
li { list-style: none; }

.ui-sortable-handle {
    border: 3px solid lightgray;
    cursor: move;
    line-height: 40px;
    text-indent: 1em;
    margin: 0.5em 0;
}

.placeholder {
    border: 3px dashed lightgray;
}

JavaScript

/**
 * The bug will also occur without any options passed to sortable.
 * These options are set to make placeholders visible in the demo.
 */
$('ul').sortable({
    placeholder: 'placeholder',
    forcePlaceholderSize: true
});