JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="content-left">
<ul id="navlist-left">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>				
</div>
<div class="content-middle">
<div class="content clear">
<h1>titel</h1>
<form action="#" method="post">
<div class="ein clear">
<label>Eingabe</label>
<input name="rein" type="text" />	
</div>
<div class="ein clear">
<h1>titel</h1>
<label>Nummer</label>
<input name="nummer" value="" type="text" />	
<input class="button" name="send" value="Speichern"  type="submit" />
</div>	
</form>
</div>
</div>
</div>

CSS

.clear:after {
    clear: both;
    content: ".";
	display:block;
    visibility: hidden;
	}
	
	


	
#navlist-left {
	border-top: 1px dotted #c0c0c0;
	width:300px;
	list-style-type:none;
	margin:0;
	padding:0;
	font-size: 12px;
	}

#navlist-left li{
	margin: 0;
	}

#navlist-left li a {color: #000;
	padding:10px 5px 10px 10px;
	display: block;
	text-decoration: none;
	border-bottom: 1px dotted #c0c0c0;
	}	

	

.container {
	border: 1px solid #BDBDBD; 
	background:#FFF;
	border-radius: 6px;
	padding:20px;
	}	

.content {
	padding:10px 20px 50px 20px;
	min-height:400px;
	}	

	
	
.content-left {
	float:left;
	width:310px;
	padding:10px 0 0 0px;
	}

	
.content-middle {
	margin-left:320px;
	min-height:500px;
	border: 1px solid #BDBDBD;
	border-radius: 6px;
	padding:20px;
	background: #EFF2FB;
	}