JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/hammerjs/hammer.js/master/hammer.js"></script>
<script src="https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="outer-box">
    
    <p>Outer Box</p>
    
    <div class="inner-box">
        
        <p>Inner Box</p>
        
    </div>
    
</div>

CSS

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    color: #999;
}
.outer-box,
.inner-box {
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    padding: 10px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.outer-box {
    width: 300px;
    height: 200px;    
}
.inner-box {
    margin: 0 auto;
    width: 250px;
    height: 100px;
}

JavaScript

$(".outer-box").hammer().bind("panright", function(event){
    console.log("Outer Box panning right");
    var deltaX = event.gesture.deltaX,
        hammerLeft = deltaX + "px"

    $(this).css({ "left": hammerLeft });
});
$(".outer-box").hammer().bind("panend", function(event){
    $(this).animate({
        left: 0,
        opacity: 1
    }, 500, "easeOutBack");
});

$(".inner-box").hammer().bind("panright", function(event){
    console.log("Inner Box panning right");
    var deltaX = event.gesture.deltaX,
        hammerLeft = deltaX + "px"

    $(this).css({ "left": hammerLeft });
    
    // nope
    // event.gesture.stopPropagation();
    
    // nope on this, too
    // event.stopPropagation();
});
$(".inner-box").hammer().bind("panend", function(event){
    $(this).animate({
        left: 0,
        opacity: 1
    }, 500, "easeOutBack");
});