JSFiddle - React, Tailwind, and code Playground

HTML

<header>
      <nav class="navbar navbar-inverse" style="">
  <div class="navContainer">
    <div id="navbar">
        <div id="leftNavSection">
		<img alt="My Logo" width="300" src="/assets/main_logo-791a416e4f99d38a339debb8dcebd7361d4172919425ace42ba2ce90336218e2.png">        
        </div>
        <div id="rightNavSection">
		Logged in as Dave A
		<a href="/users/edit">Edit</a>
		<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
	</div>
    </div>
  </div>
</nav>


    </header>

CSS

/* line 27, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/application.css.scss */
header {
  overflow: hidden;
}

/* line 31, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/application.css.scss */
#navbar {
  width: 100%;
  font-family: Arial;
  vertical-align: top;
  display: inline-block;
}

/* line 38, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/application.css.scss */
#leftNavSection {
  float: left;
}

/* line 42, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/application.css.scss */
#rightNavSection {
  float: right;
}