JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="test test-1">
    <div class="content">
        Test 1<br/>
        Container width 699px<br/>
        Element to the right is 37.5%
    </div>
    <div class="drag">
        Drag me! (OK)<br/>
        computed width <b>262.125</b> px<br/>
        ui-sortable-helper width <b>262</b> px
    </div>
    <div class="clear"></div>
</div>
<div class="test test-2">
    <div class="content">
        Test 1<br/>
        Container width 700px<br/>
        Element to the right is 37.5%
    </div>
    <div class="drag">
        Drag me! (OK)<br/>
        computed width <b>262.500</b> px<br/>
        ui-sortable-helper width <b>262</b> px
    </div>
    <div class="clear"></div>
</div>
<div class="test test-3">
    <div class="content">
        Test 2<br/>
        Container width 701px<br/>
        Element to the right is 37.5%
    </div>
    <div class="drag">
        Drag me! (bug)<br/>
        computed width <b>262.875</b> px<br/>
        ui-sortable-helper width <b>263</b> px
    </div>
    <div class="clear"></div>
</div>

CSS

.test {
    margin-bottom: 40px;
    box-shadow: 0 0 0 1px #000;
}
.content,
.drag {
    float: left;
    height: 70px;
    background: #ccc;
    text-align: center;
}
.content {
    width: 62.5%;
}
.drag {
    background: #eee;
    width: 37.5%;
}
.clear {
    clear: left;
}

.test-1 {
    width: 699px;
}

.test-2 {
    width: 700px;
}

.test-3 {
    width: 701px;
}

JavaScript

$(function() {
    $('.test').sortable();
});