html - Foundation グリッド システムが td 内で機能しない

Question

私の Web ページにはテーブルがあり、1 つの要素に対して、基盤のグリッド プロパティを適用する必要があります。行をサイズ 10 と 2 の 2 つの列に分割する必要があります。最初の列は入力フィールドで、2 番目の列はドロップダウン アイコンですが、それを実行しようとすると、2 番目の列が最初の列の後に下がります。

<table class="inner-table">
    <tr>
        <td width="20">plan </td>
        <td width="50">Mobile</td>
        <td width="15">20%</td>
        <td width="15">50%</td>
    </tr>
    <tr>
        <td>dsffgh</td>
        <td>Mobile</td>
        <td>20%</td>
        <td>50%</td>
    </tr> 
    <tr>
        <td>Plan</td>
        <td>
            <div class="row">
            <form class="project-name">
                <div class="small-11 columns">
                    <input type="text" name="projectName">
                </div>
                <div class="small-1 columns">
                    <a href="#" data-dropdown="drop1"><img src="images/Rectangle-13.png" alt="dropdown-menu" height="10em" width="10em">
                    </a>                    
                    <ul id="drop1" class="f-dropdown" data-dropdown-content>
                    <li>10</li>
                    <li>15<li>
                    <li>20</li>
                    </ul>
                </div>
                </form>
            </div>
        </td>
    </tr>
    <tr>
        <td id="dot-emp3" class="show-more">
            ...
        </td>
    </tr>
</table>

http://codepen.io/anon/pen/MaaOxG