Custom scrollbar for container with changing width

I have a div with changing width because inside it I have horizontal accordion. I need to make a custom scrollbar for it. I tried 2 plugins: this and this, none of those worked. Maybe some of you have had a similar problem? Thanks in advance!

Fiddle

<div class="scroll-pane">
    <div class="product">
        <div class="product-title">
            <img src="http://goo.gl/PUr1TP" />
            <div class="desc">This is a description This is a description This is a description This is a description This is a description This is a description This is a description</div>
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;">1</div>
            <div style="width: 100px; background: yellow;">2</div>
            <div style="width: 400px; background: pink;">3</div>
            <div style="width: 270px; background: blue;">4</div>
            <div style="width: 500px; background: aqua;">5</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/hRJ3Dz" />
            <div class="desc">This is a description</div>
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;">1</div>
            <div style="width: 100px; background: yellow;">2</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/hRJ3Dz" />
            <div class="desc">This is a description</div>
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;">1</div>
            <div style="width: 400px; background: pink;">3</div>
            <div style="width: 270px; background: blue;">4</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="https://goo.gl/vX3Aih" />
            <div class="desc">This is a description</div>
        </div>
        <div class="product-all">
            <div style="width: 200px; background: red;">1</div>
        </div>
    </div>
    <div class="product">
        <div class="product-title">
            <img src="http://goo.gl/rXt3kE" />
            <div class="desc">This is a description</div>
        </div>
        <div class="product-all">
            <div style="width: 270px; background: blue;">4</div>
            <div style="width: 500px; background: aqua;">5</div>
            <div style="width: 100px; background: green;">6</div>
        </div>
    </div>
</div>

.scroll-pane {
    height: 200px;
    overflow: auto;
    margin: 10px 0;
    background: #fff;
    height: 200px;
    width: 100%;
    /*overflow-x: scroll;*/
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0px 0 0 0;
    background: brown;
}
.product, .product-title, .product-all, .product-all div {
    display: inline-block;
    height: 100px;
    vertical-align: top;
}
.product-title img {
    height: 100%;
    cursor: pointer;
}
.product {
    position: relative;
    background: yellow;
}
.desc {
    position: absolute;
    left: 0;
    width: 100px;
    height: auto;
    background: green;
    color: white;
    white-space: normal;
}


$(document).ready(function () {

    $('.scroll-pane').jScrollPane();
    $(".product-all").hide(100);
    $(".desc").hide(100);
    $(".product-title").click(function () {

        $(".product-all").hide(500);
        $(".desc").hide(500);
        $(this).parent().children(".product-all").show(500);
        $(this).parent().children(".product-title").children(".desc").show(500);

        var i = 0;
        var piu = $(this).parent().index();
        var wrapper = $(this).parent().parent();
        var scroll_shit = 0;

        while (i < piu) {
            product = wrapper.children().eq(i);
            scroll_shit = scroll_shit + product.children(".product-title").width();
            i++;
        }

        $('.scroll-pane').jScrollPane();

        $('.wrapper').animate({
            'scrollLeft': scroll_shit
        }, 500);
    });

});

I figured it out :) Here is a fiddle. I used this plugin and it works perfectly! It is the only one that I found that is responsive and updates itself when content changes. Highly recommend. And it is super simple to use-

$(".scrollbar-rail").scrollbar();

-that is all!

Hope someone will find this usefull!