Postfix button, text not formatted well

Question

I'm trying to use the button postfix class but I can't quite get the same effect as on the demo page.

I copy-pasted code from http://foundation.zurb.com/docs/components/forms.html into the index.html page that comes with all the css/js.

This is what I expect:

This is what I get:

As you can see the Go is all pushed on the right. You should be able to reproduce this by pasting in the index.html page the following markup:

<div class="row">
  <div class="large-12 columns">
    <div class="row collapse">
      <div class="small-10 columns">
        <input type="text" placeholder="Hex Value">
      </div>
      <div class="small-2 columns">
        <a href="#" class="button postfix">Go</a>
      </div>
    </div>
  </div>
</div>

How can I replicate the same look?

Edit: here is the relevant JSFiddle: https://jsfiddle.net/amencarini/h6sjb8L6/1/

Answer 1

Take a look at Working fiddle, you can see that the button class that make this effect, by removing this class it work just fine (i dont know why, maybe some css override) :

<div class="row">
    <div class="large-12 columns">
        <div class="row collapse">
            <div class="small-10 columns">
                <input type="text" placeholder="Hex Value"/>
            </div>
            <div class="small-2 columns">
                <a href="#" class="postfix" style='background-color: #008CBA;color:#FFF'>Go</a>
            </div>
        </div>    
    </div>
</div>

You can add some inline css if you want the same color like in my example.