JSFiddle - React, Tailwind, and code Playground

HTML

<table style="border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid #eee;">
      <a href="pages/writings/Discerning Truth workbook.pdf" target="_blank">
        <img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/best-book-covers-2015-/large/wolfbordercover.jpg?1384968217" />
      </a>
    </td>
    <td style="vertical-align: top; background-color: #eee; border: 1px solid #eee;">
      <div id="bookWrapper" style="height:100%; border:1px solid #000; position:relative;">
        <div id="bookTitle" style="padding: 20px 20px 0px 20px; background-color: #e5e5e5;">
          <span style="font-size: 20px; font-weight: bold; font-family: sans-serif;">Title Goes Here</span>
          <br />
          <span style="font-family: sans-serif; font-size: 14px;">Subtitle Goes Here</span>
          <br />
          <br />
        </div>
        <div id="bookDescription" style="padding: 20px 20px 0px 20px;">
          <span style="font-size: 12px; font-family: sans-serif;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sem mollis, blandit leo et, dapibus mi. Donec leo tortor, luctus posuere enim non, tincidunt dapibus leo. Donec eros ipsum, lacinia vel scelerisque dignissim, efficitur sit amet erat. Nunc tempus dapibus justo at semper. Mauris lacinia dignissim purus, maximus semper mi tempor eget.
          </span>
        </div>
        <div id="bookNavLinks" style="padding: 20px 20px 0px 20px; position:absolute; bottom:0">
          <table style="width: 100%;">
            <tr>
              <td>                
                <img src="./images/glyphicons-201-download.png" style="opacity: .5;" />
              </td>
              <td></td>
              <td style="text-align: right;">                
                <img src="./images/glyphicons-248-note.png" style="opacity: .5;" />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </td>
  </tr>
</table>