Float Layout with fixed width and one expanding element - html

Question

I would like to do something like this:
Prefix - Input(Type: Text, Number,..) - Suffix - Button
ul
{
list-style: none;
width: 300px;
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
table
{
margin: 0 auto;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
}
input[type=number]
{
width: 100%;
}
input[type=button]
{
width: 100%;
padding: 0px 20px;
}
.value
{
padding-right: 10px;
padding-left: 10px;
}
.ok
{
padding-left: 10px;
}
<ul>
<li>
<table>
<tr>
<td class="prefix">
prefix
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suffix
</td>
<td class="ok">
<input type="button" value="val1"/>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="longervalue"/>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="v"/>
</td>
</tr>
</table>
</li>
</ul>
I have a fixed width within this 4 things have to be placed.
I don't know the Prefix, Suffix and also not the Text of the Button.
I would like that all those 3 elements use the minimal possible space and the width of the inputtag fills up this place.
Is this possible?
I would not like to use a table or JS IF POSSIBLE

Answer 1

Use Flexbox layout.
Given this html:
<section>
<label>pre</label>
<input type="number" size="1"/>
<label>suf</label>
<input type="button" value="longervalue"/>
</section>
All you need is:
section {
display: flex;
}
input[type=number] {
flex-grow: 1;
}
jsFiddle

Answer 2

Use belo code
<style>
ul
{
list-style: none;
width: 300px;
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
table
{
margin: 0 auto;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
}
input[type=number]
{
width: 100%;
}
input[type=button]
{
width: 100%;
padding: 0px 20px;
}
.value
{
padding-right: 10px;
padding-left: 10px;
}
.ok
{
padding-left: 10px;
}
</style>
<ul>
<li>
<table>
<tr>
<td class="prefix">
prefix
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suffix
</td>
<td class="ok">
<input type="button" value="val1"/>
</td>
</tr>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="longervalue"/>
</td>
</tr>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="v"/>
</td>
</tr>
</table>
</li>