JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<body>
    <div class="cohttp://jsfiddle.net/arcm111/Q5Bm4/#updatentent">
        <div class="back">
            <div class="filler"></div>
            <div class="entry">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="entry">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="entry">
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</body>

CSS

.content {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
    }
    .back {
        width: 920px;
        margin: 20px 0;
        padding: 20px;
        background: #99ccff;
        float: left;
    }
    .filler {
        width: 920px;
        height: 500px;
    }
    .entry {
        width: 920px;
        margin-bottom: 20px;
        float: left;
    }
    .left {
        width: 100px;
        height: 100px;
        background: #e0e0e0;
        float: left;
        margin-right: 20px;
    }
    .right {
        width: 800px;
        height: 100px;
        background: #0066cc;
        float: left;
    }
    .footer {
        height: 500px;
        width: 960px;
        display: block;
    }

JavaScript

$(document).ready(function () {

    $(".right").click(function () {
        var height = ($(this).height() == 100) ? 200 : 100,
            offset = $(this).offset().top;
        $(this).stop().animate({
            'height': height
        },400);

        $('html, body').stop().animate({
            'scrollTop': offset
        }, 400);

        });

    });