Prevent floating divs from breaking into lines as the container decreases

Question

Asked a similar question here and I received a satisfactory answer for the container box, but as it gets smaller, as you can see, the buttons still each jump to new line as the container "shrinks" to be replaced by another.

This is also true for the "incoming" box but it's not very noticeable and I imagine whatever the answer here is, it'll solve both.

I'd like it to look as if it's a totally smooth transition with nothing breaking:

As you can see the old "divs" break rank while the input doesn't seem to care all that much.

For what it's worth, they're both floats and the code looks like this: (incomplete but you get the idea)

<div class="box-padder">
  <div class="step-container">
    <div class="step step-1">
      <h1 class="box-header">ENTER YOUR ZIP CODE</h1>
      <input autocomplete="on" class="input" id="zip" maxlength="5" placeholder="Enter Zip Code" type="tel" value="83406" />
      <div class="tcenter">
        <div class="next first-next">NEXT &nbsp;<span class="gte">&rsaquo;</span></div>
      </div>
    </div>
    <div class="step step-2">
      <h1 class="box-header">FULL NAME</h1>
      <input autocomplete="on" class="input" id="full_name" placeholder="Your Full Name" type="text" value="a b" />
      <div class="tcenter">
        <div class="back">BACK &nbsp;<span class="gte">&lsaquo;</span></div>
        <div class="next">NEXT &nbsp;<span class="gte">&rsaquo;</span></div>
      </div>
    </div>

Here's the (messy) code governing the transitions:

if (!window.animating && window.step < window.MAXSTEP) {
  window.animating = true;
  // Necessary for smooth transition; needs work
  $('.step-' + window.step).css('float', 'left')
  $('.step-' + window.step).css('width', '310px')
  $('.step-' + window.step).css('overflow', 'hidden')
  $('.step-' + (window.step + 1)).css('float', 'right')

  // Start decreasing font size
  $('.step-' + window.step).find('.box-header').animate({
    'font-size': '9px'
  }, sliderSpeedUp, function() {})

  // Undo the changes please. For some reason you have to use animate. If you can figure out why,
  // tell me because I have no f clue
  $($('.step-' + window.step).find('.box-header')[0]).animate({ 'font-size': '23px', 'color': 'maroon' }, 250, function() {})

  // Slide boxes
  $('.step-' + window.step).slideLeftHide(sliderSpeedUp, function() {
    // Buttons
    setButtons();
    window.animating = false;
  });
  $('.step-' + (window.step + 1)).slideLeftShow(sliderSpeedDown, function() {
    // Buttons
    setButtons();
    setTimeout(function() {
      window.animating = false;
    }, 250);
    window.step++;
  });
}

Here's the sliders I got from this answer:

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}