CSS - 100 height in a tablecell - html

Question

I have a table cell with various height.
I want to have 1 or more spans in the last cell with some requirements:
height must be equal of the full row height, most imortant
width must be equal to the spans. So exactly fit to the right and no whitespace on the left.
I can not find the solution.
The CSS:
* {
box-sizing:border-box;
}
table {
width:100%;
}
td { border:1px solid blue; }
input {
height:50px;
}
.buttons {
width:1px;
white-space:nowrap;
}
.button {
padding:5px 20px;
background:red;
display:inline-block;
}
And the HTML:
<table>
<tr>
<td><input value="I have height of 50px" /></td>
<td class="buttons">
<span class="button" title="I have width of 25px">+</span>
<span class="button" title="I have width of 25px">+</span>
</td>
</tr>
</table>
I tried position relative/absolute on the last td and a container for the buttons, but then it will fall outside the table
Ofcourse i tried height:100%, no difference
http://jsfiddle.net/70a6q5kz/3/
--edit
Solution
I found this solution:
Css:
table { height:100%; }
.buttons { height:100% }
Full solution:
http://jsfiddle.net/70a6q5kz/11/

Answer 1

In the css you could remove the padding from td, create the .button:last-of-type and insert a margin-right:-1px on it
* {
box-sizing:border-box;
}
table {
width:100%;
}
td {
border:1px solid blue;
padding: 0; /********************************/
}
input {
height:50px;
}
.buttons {
width:1px;
white-space:nowrap;
padding: 0;
}
.button:last-of-type{ /*************************/
margin-right:-1px; /*************************/
} /*************************/
.button {
padding:15px 20px;
background:blue;
display:inline-block;
height:50px;
}
The html can stay the same

Answer 2

Possible Solution
I found this as an possible solution. In simple words:
Css:
table { height:100%; }
.buttons { height:100% }
Full solution:
http://jsfiddle.net/70a6q5kz/11/
Works in IE 11, FF and chrome

Answer 3

You could do something with flex. You also need to remove the initial padding of the tds.
Check snippet:
* {
box-sizing: border-box;
}
table {
width: 100%;
}
td {
border: 1px solid blue;
padding: 0; /* remove initial padding */
}
input {
height: 50px;
}
.buttons {
display: flex;
white-space: nowrap;
}
.button {
flex: auto;
width: 25px;
background: red;
text-align: center;
}
<table>
<tr>
<td><input value="I have height of 50px" /></td>
<td>
<div class="buttons">
<span class="button" title="I have width of 25px">+</span>
<span class="button" title="I have width of 25px">+</span>
</div>
</td>
</tr>
</table>