Height of left and right sides are uneven - CSS

Question

With the following code, I'm trying to get the leftside and rightside to be the same height despite the fact that I have lots of info on the left and a little bit on the right. I want there to be vacant space under the text on the rightside. Have I coded wrong or am I missing something? Thanks.

#sides {
  padding-bottom: 40px;
  margin-bottom; 40px;
  background-color: white;
}

#leftside {
  width: 62%;
  display: inline-table;
  background-color: #000000;
  float: left;
  padding-right: 20px;
  padding-left: 5%;
  box-sizing: border-box;
}

#rightside {
  width: 38%;
  display: flex;
  background-color: #808080;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
  flex-direction: column;
}  

<div id="sides">
  <div id="leftside">
    <h1>TONS O' TEXT</h1>
  </div>
  <div id="rightside">
    <h1>TINY AMOUNT OF TEXT</h1>
  </div>
</div>

Answer 1

Remove display: inline-table; from #leftside