JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	    <div id="container">

		<div id="links">
			<p>Wichtiger Text. Wichtiger Text. Wichtiger Text. Wichtiger Text. Wichtiger Text. Wichtiger Text. Wichtiger Text. </p>
		</div>
		
		<div id="rechts">
				<p>Eigentlich egal und unwichtig. Eigentlich egal und unwichtig. Eigentlich egal und unwichtig. Eigentlich egal und unwichtig. </p>
		</div>
	
	</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    color: #333;
    font: 0.75em/1.5em Arial,sans-serif;
	height: 100%;
}

#links, #rechts {display:inline;width:50%}

#links{padding:0px;float:left;background:#aaf;clear:none}
#rechts{margin:0px;padding:0px;float:right;background:#faa;}

#container {
	background-color: #fff;
	width:90%;
    margin: auto;
	box-shadow:10px 0 10px rgba(0, 0, 0, 0.4), -10px 0 10px rgba(0, 0, 0, 0.4);
	height:100%
	}