Zurb Ink Button Not Respecting 2 Columns in Panel

Question

In creating a HTML email, I am using Zurb Ink framework.

I have a panel that I want to have a several horizontal lines of display inside of the panel. For instance:

Panel:
[assigned] 12/12/2013 12:14:00 Reboot Server
[unassigned] 12/12/2013 15:00:00 Shutdown Server

Where there is a button for assigned/unassigned and text following.

In this code I have I created the panel and the button successfully inside the panel. However, I can not get the button to take only two columns. How can I make the button take only 2 columns and then have text after the button?

            <table class="row callout">
                <tr>
                    <td>
                        <table class="twelve columns">
                            <tr>
                                <td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">
                                    <table class="two columns">
                                        <table class="tiny-button small radius alert">
                                            <tr>
                                                <td>
                                                    unassigned
                                                </td>
                                            </tr>
                                        </table>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

Answer 1

I believe sub-columns are what you're looking for. From the Zurb documentation:

While the Ink grid can't be nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a tag underneath a .columns table, you can sub-divide the .columns table into sub-columns.

Markup

<table class="container">
    <tr>
        <td>

            <table class="row">
                <tr>
                    <td class="wrapper">

                        <table class="twelve columns">
                            <tr>
                                <td class="four sub-columns">
                                    <table class="button">
                                        <tr>
                                            <td> <a href="#">Assigned</a>

                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="eight sub-columns last">2/12/2013 12:14:00 Reboot Server</td>
                                <td class="expander"></td>
                            </tr>
                            <tr>
                                <td class="four sub-columns">
                                    <table class="button">
                                        <tr>
                                            <td> <a href="#">Unassigned</a>

                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="eight sub-columns last">12/12/2013 15:00:00 Shutdown Server</td>
                                <td class="expander"></td>
                            </tr>
                        </table>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Fiddle: http://jsfiddle.net/galengidman/MPQ38/1/

Answer 2

From docs:

To create buttons that look great in most clients, make a table of class button to wrap your <a> tag. Buttons expand to the full width of their container by default, so if you don't want them to expand all the way, consider placing them in a sub-grid or block-grid element.

It means you can put the button table inside a sub-grid element