aligning div content (dynamic list boxes) next to each other

[brams mun]

Hi

I have used ajax to populate dynamic list boxes upon clicking a button.

<tr>
                    <td></td>
                    <td><[b]div[/b] id="deviceInfo.${i}"></div></td>

                </tr>

the content of the template is

<td>
<g:select name="manufacturers.${id}.${rowId}" from="${manufacturers}" onChange="updateDevices('${id}.${rowId}')"  noSelection="${['null':'Select a manufacturer']}" value="manufacturers.${id}" />
</td>
<td>
<div id="devicesField.${id}.${rowId}">
<g:if test="${devices != null}">
    <g:select name="devices.${id}.${rowId}" class="deviceSelect" from="${devices}" noSelection="${['null':'Select a manufacturer']}" value="devices.${id}" />
</g:if>
<g:else>
    <g:select name="devices.${id}.${rowId}" class="deviceSelect" from="${[:]}" noSelection="${['null':'Select a manufacturer']}" />
</g:else>
</div>
</td>

The problem is I am expecting both the list boxes to be displayed next to each other, but as both are in the same td, one is displayed down to the other.

I have tried adjusting and changing the tr and td combination but then the list boxes are displayed out of the table

Any hints on presenting it in an expected manner?