JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="map">
    </div>
    <div id="handle">+</div>
    <div id="list"></div>
</div>

CSS

div.container {
    height: 500px;
    border: 1px dashed black;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: center;
	-webkit-align-items: center;
}

div#map {
    display: -webkit-flex;
	-webkit-flex: 1;
	-webkit-transition: -webkit-flex .2s;
	height: 100%;
	width: 100%;
    background-color: green;
}

div#handle {
	width: 30px;
	height:30px;
	top: -15px;
	position:relative;
	background-color: steelblue;
	border: 5px solid white;
	border-radius: 50%;
	cursor: pointer;
	color: white;
	text-align: center;
	font-size: 22px;
}

div#list {
    -webkit-flex: 2;
	overflow: scroll;
	padding: 1rem;
	width: 80%;
    background-color: red;
}

JavaScript

$( document ).ready( function() {
    var toggled = false;
    $( "#handle" ).click( function() {
        if ( !toggled )
            $( "#map" ).css( "flex", "2" );
        else
            $( "#map" ).css( "flex", "1" );
        toggled = !toggled;
    });
});