【JQuery UI】resizable.jsを利用した際にwidthがおかしな動きをする

resizable.jsというJQuery UIのライブラリを利用しているのですが、複数要素が存在する場合に少しおかしな挙動をします。
下記のコードで実装（実際にはcodepenの方が見やすいと思いますので準備しました）しています。

具体的に不思議な挙動等は
0. 赤色の.c1要素を右方向にリサイズします。

例えば75%程度右に移動させた時点で一度、サイズを固定します
その後、改めて右にリザイズしようと一度、赤色の.c1が左に少し戻ってからリサイズをスタートしようとします。

この現象について、.c1,.c2のwidthの割合を変えると左に少し戻る幅が変わるので、これらの要素のcss設定上の問題なのかとも思ったのですが、いろいろつけたり外したりこねくり回しても、当該現象を取り除くことができません。。

もしうまいアイデアがあればとアドバイスをいただきたく、投稿させていただきました。
よろしくお願いもうしあげます。

Html
1<html lang="ja">
2  <head>
3    <title>TexTile</title>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
7    <style>
8      .parent{
9        width:500px;
10        height:100px;
11        background:gray;
12        display:flex;
13       }
14     .c{
15        height:100%;
16       }
17     .c1{
18         width:75%;
19         background:red;
20        }
21     .c2{
22        width:25%;
23         background:blue;
24        }
25    </style>
26
27
28    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
29    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
30  </head>
31  <body>
32     <div class="parent">
33      <div class="c c1 resizable"></div>
34      <div class="c c2 resizable"></div>
35     </div>
36　　　<script>
37       $(document).ready(function () {
38        $(".resizable").resizable({
39        containment: 'parent',
40        handles: 'e',
41        animateDuration: 'fast'
42        })
43       })
44     </script>
45  </body>