JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demoContainer">
    <div class="body_wrapper clearfix" style="border:1px solid black">
        <div class="forumcontents" style="border:1px solid black">
            Forum Contents<br/>
            Content 1<br/>
            Content 2<br/>
            Content 3
        </div>
        <div class="sidebar_container" style="border:1px solid black">
            Side Bar
        </div>
    </div>
</div>

CSS

.demoContainer { height: 500px; }

.body_wrapper {
  height: 100%;
}

.forumcontents {
  width: calc(100% - 290px) !important;
  float: left;
}

.sidebar_container {
  width: 270px;
  float: right;
  /* height: 100%; */
}

.clearfix {
   zoom: 1;
   clear: both;
}

JavaScript

$(function () {
    $(".sidebar_container").height($(".body_wrapper").height());
});