JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://localhost/app/static/app/d3/jquery-1.10.2.min.js"></script>
    <label class="addDiv" for="_1" id="button">Add more details?</label>
    <input id="_1" type="checkbox">

    <div class="inner" style="margin-top:20px;" id="moredetails1">
        <div class="inner1">
            <section>
                Enter Name:<input type="text" />
            </section>
        </div>
        <div class="inner2">
            <section>
                Enter Name:<input type="text" />
            </section>
        </div>
    </div>

CSS

.addDiv {
            font-size: 20px;
            display: block;
            border: solid;
            width: 16%;
            border-color: #808080;
        }

            .addDiv + input {
                display: none;
            }

                .addDiv + input + * {
                    display: none;
                }

                .addDiv + input:checked + * {
                    display: block;
                }

        .inner {
            border: 1px solid green;
            position:relative;
            width: 100%;
            height: 600px;
            bottom:6000px;
        }

        .inner1 {
            position: relative;
            width: 50%;
            height: 500px;
            float: left;
            background: #808080;
            background-color: #808080;
            overflow: hidden;
        }

        .inner2 {
            position: relative;
            width: 50%;
            height: 500px;
            float: left;
            background: green;
            background-color: green;
            overflow: hidden;
        }

JavaScript

$("#button").click(function () {
            $('html, body').animate({
                scrollTop: $("#moredetails1").offset().top
            }, 2000);
        });