Span, Input, Span 100% width CSS issue - html

Question

This is what i'm doing right now. I'm using LESS CSS for my design. I need to put 2 spans between a specified input. all the elements should be 100% width. spans should always 20px width input width can be change according to the screen width. Can anyone help me?
span width: 20px;
<div class="wrapper">
<span class="span-one">span</span>
<input type="text" class="input">
<span class="span-two">span</span>
</div>

Answer 1

You can achieve this with absolute positioning. It will take the spans out of the flow and put them on top of the input. You should also put the input in a div to do this as it doesn't naturally get 100% width when display:block set on it.
HTML
<div class="wrapper">
<span class="span-one">span</span>
<div class="input"><input type="text" class="input"></div>
<span class="span-two">span</span>
</div>
CSS
.wrapper { position: relative; }
div.input { margin: 0 20px; }
input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
span.span-one {
position: absolute;
width:20px; height:20px;
left:0; top:0;
background-color: red; }
span.span-two {
position: absolute;
width:20px; height:20px;
right:0; top:0;
background-color: red; }
Here's the fiddle: http://jsfiddle.net/ywUeu/1/
Of course the word 'span' in the spans is longer than 20px so it comes out of the span.
Might be best to add 'box-sizing' to input as I've done too.

Answer 2

Positioning is not ideal but you already approved the answer...this is an FYI....
Instead of positioning use: display: table-cell;
http://jsfiddle.net/Riskbreaker/CBC5A/1/

Answer 3

With your HTML:
.wrapper, .text {
width: 100%;
}
.wrapper > span {
display: inline-block;
width: 20px;
}
.wrapper.input {
width: calc(100% - 40px);
}
Better way:
<div class="wrapper">
<div class="input"><input type="text" class="text-input"></div>
</div>
CSS:
/*
.wrapper, .input{ width is 100% by default }
*/
.text-input{
margin: 0 20px;
width: calc(100% - 40px);
}