JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="flex-holder">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est mollitia quae illum sed quia voluptate ad architecto commodi</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est mollitia quae illum sed quia voluptate ad architecto commodi</h4>
  </div>
  <div class="content">
    <h2>Content</h2>
     <input type="text" class="form-control">
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est mollitia quae illum sed quia voluptate ad architecto commodi</h3>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est mollitia quae illum sed quia voluptate ad architecto commodi</h4>
  </div>
</div>

CSS

.sidebar,.content{
  border: 1px dotted grey;
	flex: 1;
}

.flex-holder{
  display: flex;
}

.sidebar{
	width:300px;
	min-width:200px;
}
.content{
  flex: 1;
	margin-left: 2rem;
}