<div id='container'>
<div class='sidebar'>Sidebar</div>
<div class='main-area'>Main Area</div>
</div>
#container {
display: flex;
background: lavender;
padding: 10px;
}
.sidebar {
height: 200px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 30%;
min-width: 100px;
max-width: 300px;
background: orchid;
}
.main-area {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 70%;
background: coral;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.