JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="div1">            
            <div id="div2" class="div2">
                <div class="jcarousel">
                    <ul>
                        <li>
                           <div class="item">ITEM 1></div>
                        </li>
                        <li>
                           <div class="item">ITEM n></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

CSS

#div1 {
        height: auto;
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        border-width: medium 1px 1px;
        border-style: none solid solid;
        border-color: -moz-use-text-color rgb(255, 255, 255) rgb(255, 255, 255);
        padding: 20px 20px 0px;
        margin-bottom: 50px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.46);
    }

    .div2 {
        margin-top: -50px;
    }

    .jcarousel {
        position: relative;
        overflow: hidden;
        height: 700px;
        margin: 0px;
        padding: 0px 20px;
    }

    .jcarousel ul {
        width: 20000em;
        position: absolute;
        list-style: none outside none;
        margin: 0px;
        padding: 0px;
    }


    .jcarousel li {
        float: left;
        width: 480px;
    }

    .item {
        margin: 0px;
        padding: 0px 20px;
        height: 100%;
    }

JavaScript

var totalHeight = 0;
$('.item').each(function(){
    totalHeight += $(this).height();
});

if(totalHeight < 40){
    $('.jcarousel').height(200);
}