JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flexbox">
  <div id="leftbox">
    <div id="leftcontent">
    <p>
    This is the short item. Why doesn't display="inline-table" on the container cause its height to "shrink to fit"?
    </p>
    </div>
  </div>
  <div id="rightbox">
    <div id="rightcontent">
    <p>
    This is the tall item.
    </p>
    <p>
    This is the tall item.
    </p>
    <p>
    This is the tall item.
    </p>
    </div>
  </div>
</div>

CSS

#flexbox { display: flex; flex-direction: row; justify-content: space-evenly; background: #cde; }
#leftbox, #rightbox { display: inline-table; background: #ffc; border: 1px solid #000; padding: 8px}
#leftbox { width: 67%; }
#rightbox { width: 28%; }
#leftcontent { display: flex; flex-direction: row; background: #f0f0f0;}
#rightcontent { display: flex; flex-direction: column; background: #f0f0f0;}