Two inline-block elements always on same line

Question

I have two elements that i always want to show in a single line. First element has 100% available width up to maximum of 350px and second has fixed with of 150px.

When width of parent (or browser) is reduced I want first element's width to get reduced to adjust both elements in same line, but second element moves to next line

Here is a sample code:

span {
    height: 30px;
    display: inline-block;
 }
.span1 {
    background: red;
    max-width: 350px;
    width: 100%;
}
.span2 {
    background: blue;
    width: 150px;
}

<span class="span1"></span>
<span class="span2"></span>

Answer 1

Hm ok, here is an example:

span {
  height: 30px;
  display: inline-block;
  margin-right: -.25em;
}
.span1 {
  background: red;
  width: 350px;
  max-width: calc(100% - 150px);
}
.span2 {
  background: blue;
  width: 150px;
}

I'm not sure if I understand you right. Here is a fiddle: http://jsfiddle.net/cmy45soz/

Ciao Ralf