Система сетки фундамента не работает внутри ТД

Question

У моей веб-страницы есть таблица, и для одного элемента я должен применить свойство сетки фундамента. Я должен разделить строку на два столбца размером 10 и 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