Выравнивание таблиц бок о бок в нескольких строках

Я пытаюсь выровнять 10 таблиц бок о бок, то есть в 5 строках и 2 столбцах. Строки в каждой таблице отличаются от других. Я использовал float: left и определил ширину для каждого div, но он все еще не работает.

Вот пример кода и скрипка

<div style="width:500px;">

    <div style="float:left; width:250px">       
        <h4>Details </h4>           
        <table border="1px">    
        <tbody >        
                <tr>
                    <td>Id</td>
                    <td>1234-4524-4591-2545</td>
                </tr>        
                <tr>        
                    <td>Name</td>
                    <td>Test</td>
                </tr>     
                <tr>
                    <td>Status</td>
                    <td>OK</td>
                </tr>        
                <tr>        
                    <td>Step</td>
                    <td>6</td>
                </tr>      
                <tr>
                    <td>Date</td>
                    <td>xxx</td>
                </tr>        
                <tr>        
                    <td>Time</td>
                    <td>ysa</td>
                </tr>                                 
        </tbody>
        </table>
    </div>

<div style="float:left; width:250px">
<div>
    <h4>Options</h4>    
</div>
<table border="1px">    
    <tbody>        
            <tr>
                <td>Option 1</td>
                <td>OK</td>
            </tr>        
            <tr>        
                <td>Option 2</td>
                <td>OK</td>
            </tr>         
            <tr>
                <td>Option 3</td>
                <td>OK</td>
            </tr>        
            <tr>
                <td>Option 4</td>
                <td>OK</td>
            </tr>                         
    </tbody>
</table>
</div>

<div style="float:left; width:250px">
<div>
    <h4>Schedule</h4>    
</div>
<table border="1px">    
    <tbody >        
            <tr>
                <td>Time</td>
                <td>11/12/12 6:30 AM</td>
            </tr>        
            <tr>        
                <td>Email ID:</td>
                <td>[email protected]</td>
            </tr>                       
    </tbody>
</table>
</div>

<div style="float:left; width:250px">
<div>
    <h4>Body</h4>   
</div>
<table border="1px">    
    <tbody>

            <tr>
                <td>Subject Line</td>
                <td>test</td>
            </tr>        
            <tr>        
                <td>From Address</td>
                <td>[email protected]</td>
            </tr>        
             <tr>        
                <td>From Name</td>
                <td>Some Name</td>
            </tr>                                      
    </tbody>
</table>
</div>

<div style="float:left; width:250px">
<div>
    <h4>User Settings</h4>    
</div>
<table border="1px">    
    <tbody>    
            <tr>
                <td>Setting 1</td>
                <td>false</td>
            </tr>        
            <tr>        
                <td>Setting 2</td>
                <td></td>
            </tr>                                              
    </tbody>
</table>
</div>
</div>
​