how to display three text fields on one line

Question

I am trying to display three textfields on one line. When screen is smaller then these textfields should be displayed in the same line. Currently when I make my browser smaller then textfields move to the second line.

How can I achieve this?

please see my code

<div class="fields">
    <input type="text" class="name" />
    <span>&ndash;</span>
    <input type="text" class="name" />
    <input type="text" class="name2" />
</div>

.fields {
    border: 1px solid grey;
    width: 23%;
}
.name {
    display: inline;
    width: 11ex;
}
.name2 {
    display: inline;
    width: 8ex;
}

Answer 1

Give white-space:nowrap; to your .fields DIV. Write like this:

.fields {
            border: 1px solid grey;
            width: 23%;
            white-space:nowrap;
        }

Check this http://jsfiddle.net/6tkF8/1/

Answer 2

This solves your issue:

.fields {
  display: inline;
}