JSFiddle - React, Tailwind, and code Playground

by vladllen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="header">
    <button class="add-btn">Add</button>
  </div>
  <div class="content">
    <div class="left">
      <button class="add-btn">Add</button>
      <h1>left</h1>
    </div>
    <div class="right">
      <button class="add-btn">Add</button>
      <p>right</p>
    </div>
  </div>
  <div class="footer">
    <button class="add-btn">Add</button>
  </div>
</div>

CSS

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  flex: 1;
}

.header {
  background: red;
}

.footer {
  background: blue;
}

.content {
  flex: auto;
  overflow-y: auto !important;
  display: flex;
  flex-direction: row;
}

.left {
  background: yellow;
  width: 70%;
}
.right {
  width: 30%;
  background-color: green;
}

JavaScript

$('.add-btn').on('click', function() {
  for (var i = 0; i < 5; i++) {
    $(this).parent().append('<p>Text</p>');
  }
});