Customize list item with fixed set of elements on the right

Question

I'm trying to customize the lay-out of my list items. On the right, I want to keep a set of 2 buttons (edit, delete) and a checkbox (enable). On the left side, the remaining area, should be filled with descriptive content. Like this.

[------------ sizing area ------------][fixed width]

I tried the ui-grid- layout but I'm only able to define a ratio for the widths eg. 80%-20%.

<ul data-role="listview">
    <li>
        <div class="ui-grid-c">
            <div class="ui-block-a" style="width:60%;">
                content                   
            </div>
            <div class="ui-block-b" style="width:20%;">
                <input id="enable1" type="checkbox" value="true" class="custom"/><label for="enable1">Enabled</label>
            </div>
            <div class="ui-block-c" style="width:10%;">                        
                <a id="edit1" href="" data-role="button" data-icon="gear" data-iconpos="notext">Edit</a>
            </div>
            <div class="ui-block-d" style="width:10%;">
                <a id="delete1" href="" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
            </div>
        </div>
    </li>
</ul>

As requested a jsfiddle with the code: http://jsfiddle.net/qN7P6/

Answer 1

I figured out how to solve this. Basically I added content in a separate div and the 3 actions in a div with float:right with a ui-grid-. To align vertically properly, I added some margin.

I adjusted the sample, I left the original code in the top <ul>, the new code in the <ul> underneath. http://jsfiddle.net/qN7P6/1/

<ul data-role="listview">
    <li style="height:28px;">
        <div>adjusted content</div>
            <div class="rightbuttons">
            <div class="ui-grid-a">
                <div class="ui-block-a" style="width:62%;">
                    <label data-inline="true"><input type="checkbox" data-inline="true" />Enable</label>
                </div>
                <div class="ui-block-b" style="width:38%; margin-top:5px;">
                    <a id="edit1" href="" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Delete</a>
                    <a id="delete1" href="" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Edit</a>
                </div>
            </div>
        </div>
    </li>
</ul>

css:

.rightbuttons {
    float:right;
    width:210px;
    margin-top:-36px;
}

I know, all style attributes should be moved to the css to clean things up. But I'll leave that for the reader.