title: how to vertically align the 2 different font sizes inside a single <p>
body: <p>As the title says, how should I vertically align this:-</p>
  
  <p>Need: - - | - | - -</p>
  
  <p>Currently the vertical alignment is by default at baseline.</p>
  
  <p>Currently: _ _ | _ | _ _</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="moduleResult"&gt;
      &lt;p&gt;You have
          &lt;span class="moduleCard"&gt;88&lt;/span&gt;
          out of
          &lt;span class="moduleCard"&gt;88&lt;/span&gt;
      correct&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.moduleResult{
      width:100%;
      }
  
  p{
      font-family:'Arial';
      font-size:20px !important;
      line-height:30px;
      text-align:center;
      }
  
  .moduleCard{
      font-size:60px !important;
      line-height:60px;
      padding:0 4px;
      }
  </code></pre>
  
  <p>and the text has to be aligned centred inside a &lt; div class"moduleResult" ></p>
  
  <p>here's the <strong><a href="http://jsfiddle.net/kfVGf/1/" rel="nofollow">Fiddle Link</a></strong></p>