JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<table>
    <tr>
        <td id="form">Form</td>
        <td id="map" rowspan="2">Map</td>
    </tr>
    <tr>
        <td id="results">
            <ul>
                <li>Result1</li>
                <li>Result2</li>
                <li>Result3</li>
                <li>Result4</li>
                <li>Result5</li>
                <li>Result6</li>
                <li>Result7</li>
                <li>Result8</li>
                <li>Result9</li>
                <li>Result10</li>
                <li>Result11</li>
            </ul>
        </td>
    </tr>
</table>

CSS

table {border: 1px solid #000;
    max-height: 350px;
    width: 550px;
    overflow: hidden}

tr {border: 1px solid #0FF}

td {border: 1px solid #0F0;
    vertical-align: top}

#form {height: 100px}
    #form.expand {height: 200px}

#results {overflow-y: scroll}

JavaScript

$('#form').click(function(){
    $(this).toggleClass("expand");
});