JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="span6">
		<div class="box">Box1<br>Box1<br>Box1<br>Box1<br>Box1<br></div>
		<div class="box2">Box2</div>
	</div>
	
	<div class="span6">
		<div class="box3">Box3</div>
		<div class="box4">Box4</div>
	</div>
	    <div id="footer">
      <div class="container">
        <p class="text-muted">test.</p>
      </div>
    </div>
</body>
</html>

CSS

html {
  position: relative;
	height: 95%;
}
body {
	height:95%;
	margin-bottom: 60px;
}
#footer {
  position:absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: rgb(47, 67, 84);
}
#footer > .container > .text-muted{
	padding-top:20px;
	color:#FFF;
	margin-top:0px;
}
.span6 {
	float:left;
	height:100%;
}
.box2 {
	border:1px solid;
	clear:both;
	height:100%;
}
.box4 {
	border:1px solid;
	clear:both;
	height:100%;
}