title: How do I right-align the second span to the lower right of the div?
body: <p>How do I get the <strong>Midweek Meeting Schedule</strong> to align to the right edge? But not lose layout? I tried a <code>div</code> with <code>float: right</code> but it was not right.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
  &lt;title&gt;CONGREGATION NAME&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  body{
      width:100%;
      margin-left: 0;
      margin-right: 0;
      background: #666;
  }
  
  .containerPage {
      min-width: 210mm;
      max-width: 210mm;
      padding-left: 2mm;
      padding-right: 2mm;
      margin-left: auto;
      margin-right: auto;
      background: #FFF;
  }
  
  .containerMeeting {
  
  }
  
  .textCongregation {
      text-align: left;
      font-family: Calibri;
      font-size: 11pt;
      font-weight: 700;
      text-transform: uppercase;
  }
  
  .textTitle {
      text-align: right;
      font-family: Calibri;
      font-size: 18pt;
      font-weight: 700;
  }
  
  @media print {
      body{
          background: #FFF;
      }
  
      .containerPage, .containerMeeting,  {
          width: 99%;
          min-width: 99%;
          max-width: 99%;
          padding-left: 0;
          padding-right: 0;
          margin-left:auto;
          margin-right:auto;
      }
  
  }&lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="containerPage"&gt;
      &lt;div class="containerMeeting"&gt;
          &lt;div style="border-bottom: 1px grey solid;"&gt;
              &lt;div style="border-bottom: 4px red solid; margin-bottom: 2px;"&gt;
                  &lt;span class="textCongregation"&gt;Congregation Name&lt;/span&gt;
                  &lt;span class="textTitle"&gt;Midweek Meeting Schedule&lt;/span&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Also tried:</p>
  
  <pre><code>&lt;div class="containerPage"&gt;
      &lt;div class="containerMeeting"&gt;
          &lt;div style="border-bottom: 1px grey solid;"&gt;
              &lt;div style="border-bottom: 4px red solid; margin-bottom: 2px;"&gt;
                  &lt;span class="textCongregation" style="float:left"&gt;Congregation Name&lt;/span&gt;
                  &lt;span class="textTitle" style="float:right"&gt;Midweek Meeting Schedule&lt;/span&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the text is aligning downwards.</p>
  
  <p>Thank you.</p>