title: Responsive boxes with a sticky/responsive button at the bottom
body: <p>(First time using Stack Overflow, let me know if I've made any grave social errors)</p>
  
  <p><a href="https://jsfiddle.net/95b18u9q/#&amp;togetherjs=RmHEgrjOCG" rel="nofollow">I've created a fiddle here of what I've been working on so far</a> <a href="https://jsfiddle.net/95b18u9q/#&amp;togetherjs=RmHEgrjOCG" rel="nofollow">https://jsfiddle.net/95b18u9q/#&amp;togetherjs=RmHEgrjOCG</a></p>
  
  <p>Here's what I want:</p>
  
  <ul>
  <li>Three boxes, each with three parts: header, description, and footer, arranged vertically</li>
  <li>In desktop, these will be arranged so they're all in a row</li>
  <li>In mobile, they'll be arranged so they're in columns, widening so they take up more width</li>
  <li>Buttons <em>aligned</em> in desktop (row) format (like the bottom row of a table), but just underneath the description in mobile (column) format</li>
  </ul>
  
  <p>Here's what's causing problems:</p>
  
  <ul>
  <li>That fourth bullet: I want the register buttons to be aligned in desktop format (row). But when in mobile format (columns), I want them to shrink to be just below the item description (this is why I can't just manually adjust row height; the columns would be too long in mobile format) </li>
  <li>I would use a table, but that wouldn't have the responsive row -> column format (or would it? I'm teaching myself responsive design, still learning)</li>
  <li>Right now, the shorter columns have the buttons covering up some
  description when in mobile form</li>
  </ul>
  
  <p>I've figured out some fixes, but they're causing problems.</p>
  
  <ul>
  <li>Flexboxes are better than  whatever was going on before, with tables.
  But this solution is making the boxes take up however much space they
  want. I want three columns or one column.</li>
  <li>Another glitchy fix: I'm using position: absolute for the longest box, and
  position: relative for the shorter ones. That's getting the boxes to
  be long enough so the buttons align in desktop mode, but position: relative boxes have buttons overlapping the description in mobile form. (It seems like a bit of a clumsy solution, too: I have to always know and mark the longest box)</li>
  </ul>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div class="pricing-container"&gt;
      &lt;div class="item-container" &gt;
          &lt;div class="item-header"&gt;Column 1&lt;/div&gt;
          &lt;div class="item-description"&gt;
              &lt;ul&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- The longest column needs position: relative. All others do not. --&gt;
          &lt;div class="item-footer" style="position: relative;"&gt;NewRegister&lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="item-container" &gt;
          &lt;div class="item-header"&gt;Column 2&lt;/div&gt;
          &lt;div class="item-description"&gt;
              &lt;ul&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="item-footer" style=""&gt;NewRegister&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item-container"&gt;            
          &lt;div class="item-header"&gt;Column 3&lt;/div&gt;
          &lt;div class="item-description"&gt;
              &lt;ul&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
                  &lt;li&gt;List Item&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="item-footer" style=""&gt;NewRegister&lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.pricing-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
  align-items:stretch;
  
  }
  
  .item-container {
    background: tomato;
    padding: 5px;
    width: 200px;
    margin-top: 10px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
  align-items:stretch;
  position:relative;
  align:row;
      width:33%
  }
  
  .item-header {
      background-color:gray;   
  }
  .item-description{
      width:90%;
  }
  .item-footer {
    background: pink;
    padding: 10px;
    width: 80%;
      margin-top:20px;
      margin-left:10px;
      margin-right:10px;
      margin-bottom: 20px;
      color: white;
      font-weight: bold;
    font-size: 12px;
    text-align: center;
  position: absolute;
  bottom:0;
  }
  @media(min-width:787px) {
  .item-container{
  width:33%
  }
  }
  @media(max-width:786px) {
  .item-container{
  width:100%
  }
  }
  </code></pre>