title: Align box content to bottom in html to PDF - no flexbox
body: <p>I have a box with a static height containing 3 other boxes, first and last with static height, the one in the middle is dynamic.</p>
  
  <pre><code>div {
      box-sizing: border-box;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
  }
  
  .returnsPolicy {
      height: 33mm;
      margin: 0;
      border: 0;
      font-size: smaller;
      text-align: center;
      padding-bottom: 1mm;
      /*position: relative;*/
  }
  
  p {
      margin: 0;
      border: 0;
      white-space: normal;
      vertical-align: bottom;
  }
  
  .returnsHeaderRow {
      height: 4mm;
      line-height: 4mm;
      font-weight: bold;
      /*margin-top: auto;
      margin-bottom: 0;*/
  }
  
  .returnsDisclaimerRow {
      height: 4mm;
      line-height: 4mm;
      /*position: absolute;
      bottom: 0;*/
  }
  
  .returnsMainContent {
      max-height: 20mm;
      height: auto;
      /*position: absolute;
      bottom: 4mm;*/
  }
  
  &lt;div class="returnsPolicy"&gt;
      &lt;p class="returnsHeaderRow"&gt;
          &lt;b&gt;
              We want every customer to be totally satisfied with their purchase.
          &lt;/b&gt;
      &lt;/p&gt;
      &lt;p class="returnsMainContent"&gt;
          If you change your mind about your purchase, please return the unused goods to us with the original proof of
          purchase within 45 days, and we will offer you an *exchange or a refund. This does not affect your statutory
          rights, including your right to claim a refund, repair or exchange where the goods are faulty or misdescribed.
      &lt;/p&gt;
      &lt;p class="returnsDisclaimerRow"&gt;
          *Excluding all shoe care products
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The commented parts in the css are some things I've tried unsuccesfully.</p>
  
  <p>This would be really easy using flexbox, but I'm trying to convert some html to a PDF on a Node instance using html-pdf, which in turn uses PhantomJS, and for some reason the flex positioning is not working correctly after printing (if I try to preview on a browser the result using flex, it works as I want it too)</p>
  
  <p>Place this in <code>.returnsPolicy</code> styles, and on a regular modern browser it works.</p>
  
  <pre><code>display: flex;
  flex-direction: column;
  justify-content: flex-end;
  </code></pre>
  
  <p>But sadly that's not my case.</p>
  
  <p>returnsMainContent is the box that has dynamic content, and my goal is to align everything to the bottom. This is a footer, and I want it to take as little space as possible, but if my text does not fill the area in returnsMainContent, then I will have some empty space after returnsDisclaimerRow.</p>
  
  <p>By using relative/absolute positioning I can place returnsDisclaimerRow and returnsMainContent to be bottom aligned, but then returnsHeaderRow cannot be positioned with absolute values, and the result is a white space between it and the returnsMainContent.</p>
  
  <p>One solution could be adding an additional dynamic paragraph containing only white space that will expand and push to the bottom the other paragraphs, but when I tried I ended up covering other paragraphs...</p>
  
  <p>Ideas?</p>