How to align two TD with different length in same row<tr> - html

Question

Please help me how to align this structure properly. I would like to decrease the size of td "Todays Special" to considerable height. This td grows based on my value say if new fruits added then the header td also grows.
Be kind to help me to resolve this
<table>
<tr>
<td class="title">Todays Special</td>
<td>
<div style="height: 120px; width:100%;overflow-y:auto;">
<table style="height: auto; width:100%;" valign="top">
<tbody>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">6</td>
<td colspan="4" class="title">mango</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">23</td>
<td colspan="4" class="title">orange</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">29</td>
<td colspan="4" class="title">banana</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">47</td>
<td colspan="4" class="title">papaya</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="4" class="title">11959</td>
<td colspan="4" class="title">kiwi</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>

Answer 1

If you edit the "Todays Special" td, you can set the desired width and font-size through the style property of the td tag. And also set the alignment you want.
As you are not making a Table header from a row, you have to set different styles to the main td and the rest of the table.
Hope I helped.

Answer 2

Assuming you just want to match the height of the column Todays's Special. You can do this by adding the rowspan according to the no. of items in the list
<td class="title" rowspan="5">Todays Special</td>
<div>
<table style="height: auto;" valign="middle">
<tbody>
<tr>
<td class="title" rowspan="5">Todays Special</td>
<td class="title">6</td>
<td class="title">mango</td>
</tr>
<tr>
<td class="title">23</td>
<td class="title">orange</td>
</tr>
<tr>
<td class="title">29</td>
<td class="title">banana</td>
</tr>
<tr>
<td class="title">47</td>
<td class="title">papaya</td>
</tr>
<tr>
<td class="title">11959</td>
<td >kiwi</td>
</tr>
</tbody>
</table>
</div>