JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="panel panel-primary panel-width-control" id="panel1">
    <div class="panel-heading">Edit Formula</div>
    <div class="panel-body">
        <form class="form-horizontal">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="textinput">Day</label>
                    <div class="col-sm-8">
                        <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-sm">
                    </div>
                </div>
                <!-- Select Basic -->
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="selectbasic">in</label>
                    <div class="col-sm-8">
                        <select id="selectbasic" name="selectbasic" class="form-control input-sm">
                            <option value="1">Business days</option>
                            <option value="2">Calendar days</option>
                        </select>
                    </div>
                </div>
                <!-- Select Basic -->
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="selectbasic">Schedule Start</label>
                    <div class="col-sm-8">
                        <select id="selectbasic" name="selectbasic" class="form-control input-sm">
                            <option value="1">Daily</option>
                            <option value="2">Weekly</option>
                            <option value="">Monthly</option>
                            <option value="">Quarterly</option>
                            <option value="">Semi-Annually</option>
                            <option value="">Annually</option>
                        </select>
                    </div>
                </div>
                <!-- Text input-->
                <div class="form-group">
             ...

CSS

body {
    margin:30px;
    font-family:century gothic;
}
.panel-width-control {
    width:430px;
    color:#666;
}
#panel1{
    z-index:10;
    position:absolute;
}
#panel2{
    position:absolute;
    top:30px;
    left:30px;
    z-index:0;
}

JavaScript

$( ".valWiz" ).click(function() {
    $( "#panel2" ).animate({"left": "460px"}, "slow" );
});
$( "#valWizClose" ).click(function() {
    $( "#panel2" ).animate({"left": "30px"}, "slow" );
});