JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="row">
            <div class="span4 red">
       <div id="mainSearch">
                <label>Quick Recipe Search</label>
                <input type="search" placeholder = "Enter Name of Dish Here"><br>

                 <div id="searchButton">
                  <input type="submit" value="Search"></input>
               </div><!--/searchButton-->

                <a id="aSearch" href="#">Advanced Search</a>

        <div id="hiddenSearch">
                <label>Country</label>
                <input type="text">

                <label>Prep Time</label>
                <input type="text">

                <label>Category</label>
                <input type="text">

                <label>Diffuclty</label>
                <input id="last" type="text">
     
            </div><!--/hiddenSearch-->
            </div><!--/mainSearch-->



            </div>
        </div>
    </div>

CSS

.container
 {
  width: 440px;
}

.red {
    background-color:#674856;
}

#mainSearch label {
    font-size:1.2em;
    color:white;
    padding:10px;
    font-weight:bold;
}

input[type="search"], input[type="text"] {
    width:90%;
    margin-left:10px;
}

input[type="submit"] {
    margin-left:10px;
}

#aSearch {
    color:white;
    margin-left:10px;
}

JavaScript

$(document).ready(function() {
    $('#hiddenSearch').hide();
    $('#aSearch').click(function(e) {
        e.preventDefault();
        $('#hiddenSearch').slideToggle(function() {
            if ($('#hiddenSearch').is(':visible')) {
                $('#searchButton').insertAfter('#last')
            } else {
                $('#searchButton').insertBefore('#aSearch')
            }
        });

    }); //a#search click function
}); // document functiontion