JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <div id="container">
      <div id="upper">
        <div id="left">left - shall reach down until footer</div>
        content part...<br> shall be next to it...
      </div>
      <div id="footer">footer</div>
    </div>
</body>
</html>

CSS

* {  margin: 0; }
    html, body { height: 100%; }
    #container {
        position: absolute; /* have no control over that container element */
        width: 400px;  height: 300px;
        top: 100px;    left: 10px;
        background: red;
    }
    #upper {
        min-height: 100%;
        height:     auto !important;
        height:     100%;
        margin:     0 auto -100px; /* -100px being the size of the footer */
    }
    #footer {
        background: green;
        height: 100px;
        position:absolute;
        left:0;
        right:0;
    }
    #left {
      background: yellow;
      float: left; width: 150px;
    position:absolute;
    bottom:0;

      /* the following CSS doesn't do what I want... */

      min-height: 100%;
      height:     auto !important;
      height: 100%;
    }