JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title></title>
</head>
<body>
<div class="menu">Menu (200px wide)</div>
<div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>

CSS

.menu {
    width: 200px;
    float: left;
    border: 1px black solid
}

.content {
    max-width: 800px;
    min-width: 300px;
    margin-left: 200px;
    border: 1px black solid
}

@media all and (max-width: 500px) {

    .menu {
        float: none;
    }

    .content {
        margin-left: 0;
    }

}