JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div>
   Before
</div>
<div id="showmorelocations-container"><p>More Locations</p>
    <div class="toggler-expand">

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

CSS

#showmorelocations-container {
    height: 100%;
    line-height: 150px;
    width: auto;
    margin: auto;
    margin-bottom: 50px;
}

#showmorelocations-container p {
    text-align: center;
    font-family: 'Hind', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100px;
}

.toggler-expand {
    height: 400px;
    width: auto;
    background-color: #FFBBBB;
    display: none;
    margin-top: -25px;
}

JavaScript

$(function() {
    $('#showmorelocations-container').click(function() {
        $(this).find('.toggler-expand').slideToggle();
    });
});