<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.