Divide Footer into textbox and small button, Corodova Android App

Question

I'm designing a page containing footer which contains long text box depending on the mobile device and a button adjacent to it, which will remain fix without considering the mobile device.

Following is the code:

<div data-role="footer" data-position="fixed"
            data-theme="e" style="position: fixed;" class="ui-grid-a">
            <div class="ui-block-a">
            <input type="text" id="addComment" name="addComment" data-inline="true"></div>
            <div class="ui-block-b">
            <a href="#" data-rel="popup"  class="ui-btn ui-mini ui-btn-inline ui-icon-check ui-corner-all ui-btn-icon-notext" style="float:right;"></a>
            </div>  
        </div>

Can we manipulate the ui-block-a width, to capture 80% of the width and remaining 20% only for the button?? Or is there some other possibility?

I want to make the appearance of the footer resembling as it is instagram while viewing comments or adding comments.

Answer 1

Use this

<div class="ui-block-a" style="width:80% !important">

jsFiddle