Fluid width of input text side by submit - css

Question

I am try to create a search field with a submit button, where the submit button width is based on it's content, and I try to make the input field width to be fluid, and as max as possible. It's in jQuery mobile.
I've found this solution, and tried to implement it without success. Here is a test JSFIDDLE
I've tried it on a simple html page, and on that it works.
Can somebody point me to where am I made the mistake?
HTML
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>

Answer 1

add this CSS in your code
.searchContainer > div:first-child {float:right;display:inline-block;}
button will get arranged as per the content.
This is generic solution. You can write it using class name.

Answer 2

Maybe using table will do the job
HTML
<div data-role="page">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<!-- /header -->
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<table style="width: 100%;">
<tr>
<td><input type="text" name="term" style="width: 100%;" /></td>
<td><input type="submit" name="search" value="Go" /></td>
</tr>
</table>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
<div data-role="footer" data-theme="b">
<h1>Copyright © </h1>
</div>
</div>
DEMO HERE

Answer 3

If you want side by side elements without width, remove float and set display:inline-block; to both elements. Or if button have fixed width (eg 70px), use float with calc() for input field width. width: calc(100% - 70px)