Making two elements stay next to each other when one has a width of 100%

Question

I am trying to make a text field expand to it's full width whilst still allowing room for the submit button next to it, however it doesn't seem like I can get it to work.

CodePen: http://codepen.io/anon/pen/eNdvWY

HTML:

<div class="wrapper">
  <input type="text" name="foo" class="tb">
  <input type="submit" name="submit" value="Go">
</div>

<div class="wrapper small">
  <input type="text" name="foo" class="tb">
  <input type="submit" name="submit" value="Go">
</div>

CSS:

.wrapper {
  width: 510px;
}

.wrapper.small {
  width: 255px;
}

input.tb {
  width: 100%;
  max-width: 456px;
}

You will see how the first one works because of the max-width set, but the smaller one drops the button to the next line.

I have tried this with floats with the same results. Is the only way to do this with tables?

Additionally, white-space: nowrap; doesn't work as it overflows the parent; which I don't want.

Answer 1

You may add:

white-space:nowrap; 

to the container of your elements

codepen

Or a better way if you don't want the button outside the parent width would be wrapping the text inputinto a span with this properties:

span {
    display: block;
    overflow: hidden;
}

and make your button float to the right (and change html order)

Like in this codepen

(You may add padding-right to the span to make space between both elements)

Third possible option may be floating both elements to the left (no html change order) and if the buttom width is known and fixed You can set the width of your input as:

width:calc (100% - XXpx);

as in this Codepen (I have added box-sizing: border-box;so paddings and margins won't mess up the calcproperty)