HTML5 behaving strange while working in jsFiddle

Question

The title is not very speaking. Using the following code, I want the two elements "Search" and "Logout" to be on the same line as the logo, but all right aligned.

<div class="wrapper">
  <div class="ui block top attached header" style="margin-bottom: 0;">
    <div class="ui grid">
      <div class="nb_header left aligned two column row">
        <div class="three wide column">
          (Logo)
        </div>
        <div class="thirteen wide right aligned column">
          <div class="">
            <div class="ui action input">
              <input type="text" placeholder="Search..."/>
              <button class="ui button">Search</button>

            </div>
            <div class="ui action red button">Logout</div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="ui attached segment">
              ...content...

  </div>
</div>

While I'm typing this exact same code into a jsFiddle for this post, I see that there it's behaving as it should. Here's the fiddle: http://jsfiddle.net/kr37euu1/4/

Here's a screenshot of how it looks like in my browser:

For comparison purposes, I'll post another screenshot of the jsFiddle's version:

Why does it behave differently?

Answer 1

I found the answer. After several changes to the fiddle and my local code, I found that the only remaining difference was the CSS and JS of semantic-ui. Using the CDN version 1.12.3 seems to work - even though my local copy also is 1.12.3.

Downloading the minifed versions from the CDN and putting them in my local instance seemed to resolve the problem - why ever.

thanks to you all for the help.