JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="container">
    	<div id="top"><h1>TESTE</h1></div>
    	<div id="content">
            <div id="left">
                <ul class="lista">
                    <li>ITEM 1</li>
                    <li>ITEM 1</li>
                    <li>ITEM 1</li>                
                    <li>ITEM 1</li>
                    <li>ITEM 1</li>
                    <li>ITEM 1</li>
                    <li>ITEM 1</li>
                    <li>ITEM 1</li>
                </ul>
            </div>
            <div id="right">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur iaculis tempor. Morbi sem urna, eleifend ac mattis non, auctor sit amet nisl. In egestas semper tortor, a viverra ipsum adipiscing luctus. Nam tortor eros, viverra sed tincidunt ut, porta sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis luctus magna ac risus consectetur molestie. Pellentesque ut consequat risus. Nulla vitae sodales lacus. Etiam at quam diam, nec rutrum urna.</p>

                <p>Sed eget tellus diam, at sagittis augue. Fusce dictum purus quis ligula volutpat sit amet gravida libero egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et arcu id odio ullamcorper posuere. Donec et nunc at elit fringilla pulvinar a nec lorem. Morbi imperdiet congue suscipit. Sed in velit purus. Morbi rutrum sapien quis nisl rhoncus sit amet posuere elit pretium. Suspendisse potenti. Cras nisl justo, lobortis et aliquet nec, interdum quis turpis.</p>

                <p>Fusce id pulvinar purus. Sed rhoncus, ipsum laoreet sodales sodales, neque justo posuere risus, ac semper odio orci vitae sapien. Suspendisse ut tortor velit, suscipit elementum massa. Nulla auctor libero sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut porta enim. Sed ullamcorper velit in lorem aliquet nec tempor erat porta. Maecenas ultrices neque in metus...

CSS

@charset "utf-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}
html {
		height: 100%;
}

body {
	background: darkgrey;
	height: 100%;
    font: 13px/18px normal arial,sans-serif;
}

#container {	
	height: 100%;
	position: relative;
    width:960px
}

#top {
	height: 100px;
	width: 100%;
	background-color: black;
	color: white;
    float:left;
}

#content {
	background: darkgrey;
	width:100%;
	min-height: 100%;
    height:100%;
}
#content #left{
    float:left;
	background: lightgrey;
}
#content ul.lista {
	width: 250px;
	display: inline-block;
	vertical-align: top;
	color: red;
	bottom: 0;
}
#content ul.lista li{margin-left:10px;line-height:20px;padding:3px 10px;font-size:13px;}


#right {
	width: 680px;
	color: blue;
	display: inline-block;
	padding: 10px;
	min-height: 400px;
    float:right;
}


#footer {
    clear:both;
	color: black;
	height: 50px;
	text-align: center;
	width: 100%;
    backgorund-color:#ccc;
    margin-top:30px;
}

JavaScript

$(document).ready(function(){
    //    getting total height of the container with a id "right"
    //    assuming its the main container where all the contents will go.
    
    var containerHeight = $('#right').outerHeight();
    
    //    targeting the left menu container having an id "left"
    //    assuming it is the container of the left menu item container
    $('#left').height(containerHeight);
});