JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div id="sidebar">
    <ul>
      <li><a href="">item</a></li>
      <li><a href="">item</a></li>
      <li><a href="">item</a></li>
      <li><a href="">item</a></li>
    </ul>
  </div>
  <div id="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita in eius id unde animi, quaerat a distinctio nemo, corporis sint assumenda cupiditate ab officia, ad beatae autem. Sit, ratione inventore? Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Expedita in eius id unde animi, quaerat a distinctio nemo, corporis sint assumenda cupiditate ab officia, ad beatae autem. Sit, ratione inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita in eius id unde animi, quaerat
    a distinctio nemo, corporis sint assumenda cupiditate ab officia, ad beatae autem. Sit, ratione inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita in eius id unde animi, quaerat a distinctio nemo, corporis sint assumenda
    cupiditate ab officia, ad beatae autem. Sit, ratione inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita in eius id unde animi, quaerat a distinctio nemo, corporis sint assumenda cupiditate ab officia, ad beatae autem. Sit,
    ratione inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita in eius id unde animi, quaerat a distinctio nemo, corporis sint assumenda cupiditate ab officia, ad beatae autem. Sit, ratione inventore? Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Expedita in eius id unde animi, quaerat a distinctio nemo, corporis sint assumenda cupiditate ab officia, ad beatae autem. Sit, ratione inventore?
  </div>
</div>

CSS

#main {
  float: left;
  background: green;
  width: 60%;
  padding:1em;
  margin-bottom: 5px
}

#sidebar {
  float: left;
  background: red;
  width: 33%
}

JavaScript

var $hauteur = $('#main').outerHeight() + parseInt($('#main').css('margin-bottom'));
   $('#sidebar').css('min-height', $hauteur);