JQuery Mobile устанавливает ширину 2 элемента на 80% и 20%

Я использую JQuery Mobile и пытаюсь установить ширину двух элементов, используяui-grid-a как показано в коде ниже. В результате получим 2 элемента, ширина которых равна50:50%, Я хотел бы, чтобы ширина моего входного текста была80% и моя кнопка будет20% в той же строке. Как это сделать?

<div data-role="footer" data-theme="a" class="ui-grid-a"  data-position="fixed">
    <div class="ui-block-a" >
        <input id="outgoingMsg" placeholder="Your Message . . .">
    </div>
    <div class="ui-block-b" >
        <div style="margin: 10px 0 0 0;">
            <a id="callDialog" href="#dialog" type="button" 
                 data-theme="b" data-rel="dialog"  
                 data-transition="slidedown">Send</a>
        </div>
    </div>
</div>

Ответы на вопрос(2)

Ваш ответ на вопрос