JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://flowcenter4.flowworks.de/frontend/assets/css/jquery.bxslider.css">
<script src="http://flowcenter4.flowworks.de/frontend/assets/js/jquery.bxslider.js"></script>
<div id="wrapper">
    <div id="pdf_presentation">
        <div id="slider">
            <ul class="bxslider">
                <li class="12302">
                    <img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" alt="page 0" />
                </li>
                <li class="12302">
                    <img src="http://img3.wikia.nocookie.net/__cb20060423235201/tovid/images/0/00/4_3_grid.jpg" alt="page 1" />
                </li>
                <li class="12302">
                    <img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="page 2" />
                </li>
                <li class="12302">
                    <img src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/image/tests/images/imageHoriz.jpg" alt="page 3" />
                </li>
                <li class="12302">
                    <img src="http://4.bp.blogspot.com/-cVEz-BBU5Mw/U8uLaEKhdCI/AAAAAAAAJxQ/ZG06K9VPj9A/s1600/P1130206.JPG" alt="page 4" />
                </li>
                <li class="12302">
                    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSKccu9ixyiNsVR7cHZNdQNUiTRwMMEvkGFbaU_eFC1FaW_DTMCNw" alt="page 5" />
                </li>
            </ul>
            <div id="custom_pager">
                <ul id="custom_pager_list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="video_wrapper">
        <video preload="none" id="movie" controls>
            <source id="mp4" type="video/mp4"...

CSS

*{
                padding: 0;
                margin: 0;
            }
            
            body{
                font-family: Arial, Helvetica, Verdana, sans-serif;
                font-size: 12px;
            }
            
            #wrapper{
                width: 980px;
                height: 1000px;                
                margin: 0 auto;
                margin-top: 20px;
                box-shadow: 0 0 10px #ccc;
            }
            
            #slider{
                width: 400px;
                height: 300px;
                float: left;
                margin-left: 10px;
            }
            
            #video_wrapper{
                float: right;
                margin-right: 10px;
                
            }
            
            #video_wrapper video{
                width: 548px;
                height: 308px;
            }
            
            .bx-pager{
                display: none;
            }
            
            #custom_pager{
                float: left;
                width: 400px;  
                height: auto;              
            }
            
            #custom_pager li{
                float: left;
                list-style-type: none;
                cursor: pointer;
                padding: 0 3px;
            }

            #custom_pager li:hover {
                font-weight: bold;
            }
            
            .bx-wrapper{
                margin-bottom: 0 !important;
            }
            
            /*
            .bx-wrapper img{
                max-width: none !important;
            }*/
            
            .current_slide{
                font-weight: bold;
            }
            
            .ui-resizable-se{
                z-index: 300000 !important;
            }

JavaScript

$('.bxslider').bxSlider({
    mode: 'fade',
    infiniteLoop: false,
    hideControlOnEnd: true,
    keyboardEnabled: true,
    useCSS: false,
    controls: false
});

$('#slider').resizable({
    aspectRatio: 750 / 577,
    handles: 'se',
    containment: '#wrapper',
    autoHide: true,
    alsoResizeReverse: "#movie",
    resize: function (e, ui) {
        $('.bxslider img, .bx-viewport, .bx-wrapper').css({
            width: ui.size.width,
            height: ui.size.height
        });
        $('.bx-wrapper img').css({
            maxWidth: ui.size.width
        });
        $('#custom_pager').css({
            width: ui.size.width
        });
        //console.log($('#custom_pager').height());
        var custom_pager_height = $('#custom_pager').height();
        $('#slider').css({
            height: ui.size.height + custom_pager_height
        });
     }
});


$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function(event, ui) {

        var self = $(this).data("resizable"), o = self.options;

        var _store = function(exp) {
            $(exp).each(function() {
                $(this).data("resizable-alsoresize-reverse", {
                    width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10),
                    left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)
                });
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
            else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
        }else{
            _store(o.alsoResizeReverse);
        }
    },

    resize: function(event, ui){
        var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

        var delta = {
            height: (self.size.height -...