title: Vertically align stubborn paragraphs
body: <p>I have been trying to get an 'About Us' section to vertically align to the paragraph below it.  For some reason, when I try to resize the viewing area or look at it from a smaller screen, About and Us are on two different lines, and if you keep making the area smaller 'About Us' will drop down below and to the left of the entire paragraph.  </p>
  
  <p>My first question that I was pondering is how do I make it so the 'About Us' text stays on one line, rather than folding in to two or more lines.  My second would be how can I make this scalable without dropping the 'about us' text below the paragraph?</p>
  
  <p>Attached is my code in JSFiddle.</p>
  
  <p>Thanks guys!!  </p>
  
  <p><a href="http://jsfiddle.net/2L9qU/" rel="nofollow">http://jsfiddle.net/2L9qU/</a></p>
  
  <p>Here is the troubling html:  </p>
  
  <pre><code>                &lt;div class="mainContentContainer"&gt;
                  &lt;div class="mainContent1"&gt;
                          &lt;h1&gt;
                  ABOUT US
              &lt;/h1&gt;
  
                  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the accompanying CSS:</p>
  
  <pre><code>.mainContentContainer {
      width: 85%
  }
  .mainContent1 h1 {
      font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
      color:#00245D;
      text-align: left;
      float: left;
      width: 80%;
      min-width: 10%;
  }
  .mainContent1 {
      color: #000;
      text-align: left;
      max-width: 960px;
      min-width: 100px;
      width: 35%;
  }
  .mainContent2 {
      color: #000;
      text-align: left;
      max-width: 960px;
      width: 50%;
      margin-left: -6%;
      display: inline-block;
  }
  </code></pre>