title: bootstrap dropdown use flexbox and space-between for content to fill space
body: <p>I'd like to have two side menus in a dropdown in the navbar. In order to accomplish that I'd like to use flexbox. However the words are wrapping and i would like them not to and instead grow to fit the width of the content. </p>
  
  <p><strong>Tip</strong>: You'll need to expand the fiddle's rendering width to avoid the bootstrap collapse.
  <a href="https://jsfiddle.net/qprus35e/5/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;div class="flex-container"&gt;
                &lt;div&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Left Side&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Longer content on the left side&lt;/a&gt;&lt;/li&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
  </code></pre>