HTML tables inside centered div not displaying properly - html

Question

I have a DIV with multiple tables that are being filled by a database search and thus will differ in the amount of table that show.
I want the tables to be next to each other and this works for the first few rows but then something is pushing the fourth row of tables down and out of order.
Here is a fiddle: https://jsfiddle.net/tcanfarotta22/yn4s6cpv/
<table id='scholarship' style='float:left;' align='center'>
<th colspan='2'>
<h3>University of Michigan--Dearborn</h3>
<h5>MI, Public</h5>
<h5>Competitive</h5></th>
<tr>
<td style='text-align:center;'>
<h3>$11,524 in-state $23,866 out-of-state</h3>
<br>
<h5>Tuition</h5></td>
<td style='text-align:center;'>
<h3>63.60%</h3>
<br>
<h5>Acceptance Rate</h5></td>
</tr>
<tr>
<td>Scholarship Annual Amount: Full Tuition</td>
<td>Eligibility: In-state</td>
</tr>
<tr>
<td colspan='2' style='text-align:center;'>
<h3>Required Test Scores</h3></td>
</tr>
<tr>
<td>SAT: 970 CR+M</td>
</tr>
<tr>
<td>ACT: 21</td>
</tr>
<tr>
<td>GPA: 3</td>
</tr>
<tr>
<td colspan='2'>Mid 50% SAT Score: SAT Math 498-660 SAT Critical Reading not reported SAT Writing 470-600 </td>
</tr>
<tr>
<td colspan='2'>Mid 50% ACT Score: 22-27 </td>
</tr>
<tr>
<td colspan='2'>Is this Scholarship Available for International Students? .</td>
</tr>
<tr>
<td colspan='2'>US News Ranking: not on the list</td>
</tr>
<tr>
<td colspan='2'>Forbes Ranking: #437 Best Colleges</td>
</tr>
<tr>
<td colspan='2'>Money Ranking: </td>
</tr>
<tr>
<td colspan='2' style='text-align:center;'><a href='http://umdearborn.edu/fa_morefreshmanscholarships' target='_blank'>Click Here to Visit Site</a></td>
</tr>
<tr>
<td colspan='2'>
<input type='checkbox' value='ARLUJ' name='cell[]'>Check the Box to Save</td>
</tr>
<tr>
<td colspan='2' style='text-align:center;'>Scholarship Details</td>
</tr>
<tr>
<td colspan='2'>Detroit Compact Scholarship awards renewable full-tuition scholarships to qualified students from the Detroit Compact High Schools. Students are selected to participate in this program by school administrators. Students are required to have a recalculated GPA of 3.0 and a minimum composite ACT of 21 or SAT combined score of 970.</td>
</tr>
</table>
Edit: I would like them displayed as 4 items on each line.

Answer 1

You shouldn't use float if you want them to be always in one row.
Instead you could do this, make the form as table, and the divs inside as table cell.
form {
display: table;
}
form > div {
display: table-cell;
vertical-align: top;
}
https://jsfiddle.net/yn4s6cpv/2/
Or using flexbox, just add the following style:
form {
display: flex;
}
https://jsfiddle.net/yn4s6cpv/3/
Edit: in order to display 4 items each row. You can set clear:left on every 5th item.
form > div:nth-child(4n+1) {
clear: left;
}
https://jsfiddle.net/yn4s6cpv/4/