JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="row-one">
    <div class="row-wrapper">
      <p>TOP CONTENT</p>
      <div class='card'>
        <p>Im a card </p>
        <div class="dropdown">
          <h1>DROPDOWN</h1>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
        </div>
      </div>


    </div>
  </div>

  <div class="row-two">
    <p>...content</p>
    <p>...content</p>
    <p>...content</p>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.row-one {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex: 0 1 200px;
  background: red;
}

.row-wrapper {
  overflow-y: auto;
  z-index: 10000;
}

.card {
  position: relative;
  background: white;
}

.dropdown {
  height: 300px;
  width: 200px;
  background: blue;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}

.row-two {
  flex: 1;
  display: flex;
  background: #fff;
  flex-direction: column;
  background: pink;
  height: 100%;
}