title: Align overflowing container to right of grid cell, not grid row
body: <p>I have a 12 column grid. Column 1 is a month number and column 2-12 are a text title.</p>
  <p>However, the font of the number is so large that it was forcing the column width to be larger than the other columns. I'm trying to keep equal column width while also not letting the contents of the first column overlap the title text.</p>
  <p>To do this, I was hoping I could just align the contents of the first column to the right edge of the column... alas, it's not working.</p>
  <p><a href="https://codepen.io/rothamsted-rothamsted/pen/jOWJpPb" rel="nofollow noreferrer">Codepen</a></p>
  <p>Here is the columns:
  <a href="https://i.stack.imgur.com/6P4M6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6P4M6.png" alt="enter image description here" /></a></p>
  <p>and this is the div inside column 1 that is holding the H3 number text:
  <a href="https://i.stack.imgur.com/hG1gv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hG1gv.png" alt="enter image description here" /></a></p>
  <p>How can I get the .date-container div to align it's right edge, to the right edge of it's parent column?</p>
  <p>and of course, some code:</p>
  <pre><code>.month-title-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, auto);
    column-gap: 10px;
  }
  
  .date-container{
    position: absolute;
  }
  
  .date-container h1{
    position: relative;
    text-align: end;
  }
  
  .col-1
  {
  grid-column-end: span 1;
  }
  
  
  &lt;div class=&quot;month-title-grid&quot;&gt;
  &lt;div class=&quot;col-12&quot;&gt;&lt;h3 class=&quot;lightbrown&quot;&gt;January&lt;/h3&gt;&lt;/div&gt;
  &lt;div class=&quot;col-1&quot;&gt;&lt;div class=&quot;date-container&quot;&gt;&lt;h1 class=&quot;lightbrown&quot;&gt;01&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class=&quot;col-11&quot;&gt;&lt;h2 class=&quot;darkbrown&quot;&gt;IT'S COMPLICATED&lt;/h2&gt;
  </code></pre>