HTMLテーブルと説明テキストを同じ行に揃える方法

Question

私はこのテーブルをhtmlにしていますが、画像に表示されているテーブルと同じ行に「C2B Payments」の説明が表示されます、同じ行の左側にあり、テーブルの上にはありません。しかし、私はそれを行う方法を理解することはできません。
いずれかが私を導いてください。

<p class="align left"> C2B Payments</p> 
<table border="0" align="center"; margin: 0 auto;"> 
    <thead> 
    <tr>  
     <th>Date</th> 
     <th>Total Received</th> 
     <td>Failed</td> 
    </tr> 
    </thead> 
    <tbody> 

CSS

.alignleft { 
     float: left; 
     } 

Answer 1

これ？： https://jsfiddle.net/d8bpy3gk/

<p style="float:left; width:20%"> C2B Payments</p> 
<table style="border:0; align:center; margin: 0 auto;float:left; width:80%"> 
    <thead> 
    <tr>  
     <th>Date</th> 
     <th>Total Received</th> 
     <th>Failed</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr>  
     <th>10/10/10</th> 
     <th>$ 200,00</th> 
     <th>Failed</th> 
    </tr> 
    </tbody> 

    </table> 

Answer 2

はフロートで2つの部門

• を追加ありがとう：左;

• display：inline-block; vertical-align：top;

とはどこ画像である右