JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<main></main>
	<nav></nav>
</div>

CSS

html {
  background: white;
}
body {
  background: purple;
  padding: 0;
  margin: 0;
}
.wrap {
  margin: 0 auto;
  max-width: 1080px;
  min-width: 920px;
}
nav {
  overflow: auto; /* set a new context so it respects the float */
  background: red;
  height: 300px;
  min-width: 200px;
  max-width: 360px;
}
main {
  float: right;
  background: green;
  height: 300px;
  width: 720px;
}