JSFiddle - React, Tailwind, and code Playground

HTML

<div id="multiselect-wrap">
                    <p class="selectText">Select Criteria(s)</p>
                    <div class="open">Show Options</div>
                    <div class="close">Hide Options</div>
                    <div class="multiselect">
                        <div class="content">
                            <label>Green<input type="checkbox" name="option[]" value="1" /></label>
                            <p>Heading</p>
                            <label>Green<input type="checkbox" name="option[]" value="1" /></label>
                            <label>Red<input type="checkbox" name="option[]" value="2" /></label>
                            <label>Blue<input type="checkbox" name="option[]" value="3" /></label>
                            <label>Orange<input type="checkbox" name="option[]" value="4" /></label>
                            <label>Purple<input type="checkbox" name="option[]" value="5" /></label>
                            <label>Black<input type="checkbox" name="option[]" value="6" /></label>
                            <label>White<input type="checkbox" name="option[]" value="7" /></label>
                            <label>Black<input type="checkbox" name="option[]" value="8" /></label>
                            <label>White<input type="checkbox" name="option[]" value="9" /></label>
                            <p>Heading</p>
                            <label>Green<input type="checkbox" name="option[]" value="1" /></label>
                            <label>Red<input type="checkbox" name="option[]" value="2" /></label>
                            <label>Blue<input type="checkbox" name="option[]" value="3" /></label>
                            <label>Orange<input type="checkbox" name="option[]" value="4" /></label>
                            <label>Purple<input type="checkbox" name="option[]" value="5" /></label>
                            <label>Black<input type="checkbox" name="option[]" value="6" /></label>
             ...

CSS

#multiselect-wrap {
	background-color: #f6f6f6;
	width: 200px;
	padding: 0 8px 10px 10px;
	border: solid 1px #c0c0c0;
	position: fixed;
	height: 100%;
}
.multiselect {
	width: 200px;
	height: 100%;
	overflow:auto;
	border: solid 1px #c0c0c0;
	background-color: #fff;
}
.multiselect label {
	display:block;
	cursor: pointer;
	padding: 4px 10px;
}
.multiselect input {
	float: right;
	cursor: pointer;
}
.multiselect p {
	padding-left: 5px;
}
.open, .close {
	padding: 10px;
	position: absolute;
	right: -81px;
	width: 100px;
	top: 40px;
	background-color: #f6f6f6;
	border: 1px solid #c0c0c0;
	border-top-color: #f6f6f6;
	transform: rotate(-90deg);
	cursor: pointer;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
}

JavaScript

$(".open").on( "click", function() {
	$("#multiselect-wrap").animate({left:0});
	$(".open").hide();
	$(".close").show();
});

$(".close").on( "click", function() {
	$("#multiselect-wrap").animate({left: -220});
	$(".open").show();
	$(".close").hide();
});

var getMultiSelectHeight = $(".multiselect").height();
alert(getMultiSelectHeight+" "+$(".selectText").outerHeight(true));
$(".multiselect").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+150))
$("#multiselect-wrap").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+150))