JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<body>
  <div class="container-fluid">
    <main class="container py-3">
      <div class="row">

        <aside class="col-md-2">

          <div class="row banner sticky-top bg-white p-3">
            This will be some banner. Should always stick to the top.
          </div>
          <div class="scrollable-area hide-this-on-small-devices">
            <div class="row bg-white p-3">
              This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
              <hr />
            </div>
            <div class="row bg-white p-3">
              This will have a search bar. Hide this on small devices.
            </div>
            <div class="row bg-white p-3">
              This will have announcements. Hide this on small devices.
            </div>
            <div class="row bg-white p-3">
              This will have BuiltWith. Hide this on small devices.
            </div>
          </div>
        </aside>

        <section class="content col-md-6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui vivamus arcu. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Suscipit tellus mauris a diam maecenas. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Augue neque gravida in fermentum et...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.toc {
  max-height: 60%;
}

.comments {
  max-height: 40%;
}

.scrollable-area {
  overflow-y: auto;
}