If you are trying to get the 3 items in a horizontal row with the middle item wide, why not use a jQM grid with custom widths and breakpoints?
<div class="rwd-example">
<div class="ui-block-a" style="margin-top: 0.5em;">
<img src="http://lorempixel.com/30/30" id="" width="30" height="30" />
</div>
<div class="ui-block-b" >
<label for="slider-12" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50" data-mini="true" />
</div>
<div class="ui-block-c" >
<input type="text" maxlength="14" size="4" name="" id="" data-mini="true" value="" />
</div>
</div>
The CSS for the columns would then look something like this:
/* Stack all blocks to start */
.rwd-example .ui-block-a,
.rwd-example .ui-block-b,
.rwd-example .ui-block-c {
width: 100%;
float: none;
}
/* 1st breakpoint */
@media all and (min-width: 23em) {
.rwd-example {
overflow: hidden; /* Use this or a "clearfix" to give the container height */
}
.rwd-example .ui-block-a,
.rwd-example .ui-block-c{
float: left;
width: 9.95%;
}
.rwd-example .ui-block-b {
float: left;
width: 79.925%;
}
}
/* 2nd breakpoint */
@media all and (min-width: 55em) {
.rwd-example .ui-block-a,
.rwd-example .ui-block-c {
float: left;
width: 4.95%;
}
.rwd-example .ui-block-b {
float: left;
width: 89.925%;
}
}
/* 3rd breakpoint */
@media all and (min-width: 75em) {
.rwd-example .ui-block-a,
.rwd-example .ui-block-c {
float: left;
width: 2.95%;
}
.rwd-example .ui-block-b {
float: left;
width: 93.925%;
}
}
Tweak the breakpoint values and widths to meet your needs...
Here is a DEMO
UPDATE: if you still want to use a table, just use a plain table without the jQM data-role
table DEMO