title: Is there a jQuery way to make a <div> appear at the lower left of a table cell that won't destroy responsiveness?
body: <p>I need to get a <code>&lt;div&gt;</code> to be at the bottom left corner of a table cell. Something like <code>float: left;</code> and <code>float: bottom;</code> together.</p>
  
  <p>A typical cell is:</p>
  
  <pre><code>        &lt;td id="x0900A"&gt;                    &lt;!-- 0900 room A --&gt;
              &lt;p class="classTitle"&gt;
              &lt;/p&gt;
              &lt;div class="classDescrip"&gt;
              &lt;/div&gt;
              &lt;p class="instructor"&gt;
              &lt;/p&gt;
              &lt;p class="gender"&gt;
              &lt;/p&gt;
              &lt;div class="instructorBio"&gt;
              &lt;/div&gt;
              &lt;div class="instructorImg"&gt;
              &lt;/div&gt;
              &lt;div id="x0900A-roomCount" class="roomCount"&gt;
              &lt;p id="x0900A-attending" class="attending"&gt;attending&lt;/p&gt;
              &lt;p id="x0900A-capacity" class="capacity"&gt;capacity&lt;/p&gt;
              &lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>td {
    position: relative;
  }
  div[id$=roomCount] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    margin: 10px 10px 0 5px;
    text-align: left;
    opacity: 0.60;
  }
  .classTitle {
    float: left;
    margin: 5px 10px 10px 5px;
    padding: 0 5px 0 5px;
    line-height: 1.25em;
    font-size: 1.05em;
    text-align: left;
    color: #00b8b8;
  }
  .instructor {
    width: 50%;
    float: right;
    margin: 3px 0 10px 0;
    padding: 0 3px 5px 3px;
    line-height: 1.25em;
    font-size: 0.95em;
    text-align: right;
    color: #00b8b8;
  }
  .classDescrip,
  .instructorBio,
  .instructorImg,
  .gender {
    display: none;
  }
  </code></pre>
  
  <p>This locks <code>.roomCount</code> to the <code>&lt;td&gt;</code>'s bottom left but destroys responsiveness. I get horizontal overflow scrolling of the whole <code>&lt;body&gt;</code>. You can see the result <a href="https://www.familyhistoryconferencenwa.org/test-class-schedule-2019" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I tried putting a wrapper <code>&lt;div&gt;</code> inside the <code>&lt;td&gt;</code> and making it</p>
  
  <pre><code>position: relative;
  height: 100%;
  </code></pre>
  
  <p>but it's only so tall as the wrapped content requires which, for many cells, is only partway down.</p>
  
  <p>So, I need a CSS/jQuery way to anchor <code>.roomCount</code> that doesn't break responsiveness.</p>
  
  <p><strong>Note:</strong></p>
  
  <p>This is a resubmission of an <a href="https://stackoverflow.com/questions/57048151/how-to-anchor-a-div-to-the-lower-left-of-a-table-cell-without-destroying-respo">earlier question</a> that was too wordy and had much irrelevant content. I'm resubmitting it here in the hope that it will garner notice.</p>
  
  <p><strong>Edit/Update:</strong></p>
  
  <p>In response to @UdoE's comment: I have included the code and edited the "wordiness." At least, I hope I have and made it a better question.</p>
  
  <p>In response to @ChrisG's labeling this a possible duplicate: I already noted that this is a resubmission of that question and the reason why I did it. There are no answers or comments to that question as of this writing. </p>