JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="contentleft">
Content in the left
</div>

<div class="contentright">
Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    Content in the right<br>
    But wheres the space between the div-container and the top border in the sticky footer?
</div>

</div>

<div class="clearer"></div>
<div class="footer-container">
<div class="footer">
Sticky footer
</div>
</div>

CSS

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
	background-color: inherit;
	text-align: center;
	background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
 	width: 100%;
 	margin: 0px auto 0px auto;
 	padding: 0px 0px 30px 0px;
 	background-color: #E6D9BD;
    height:2000px;
	position:relative;
	    content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

	background-color: inherit;
	margin:5px 10px 10px 10px;
	padding:10px 5px 30px 5px;
	float:left;
	overflow: hidden;
	width: 300px;
		display:block;
}
.contentright
{

	background-color: inherit;
	margin:5px 0px 10px 10px;
	border:0px solid #2E181A;
	padding:10px 5px 30px 5px;
	float:left;
	overflow: hidden;
	width: 420px;
	display:block;
}