title: How can I make my left tab float left but fill the empty area to the other tabs which float right?
body: <p>I have some bootstrap tabs, which align to the right inside my container:</p>
  
  <p><a href="https://jsfiddle.net/yc2dxnev/" rel="nofollow">https://jsfiddle.net/yc2dxnev/</a></p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;div class=container&gt;
      &lt;ul id="tabs" class="tabs-right tabs"&gt;
              &lt;li class="banana active"&gt;&lt;a&gt;Banana&lt;/a&gt;&lt;/li&gt;
              &lt;li class="monkey"&gt;&lt;a&gt;Monkey&lt;/a&gt;&lt;/li&gt;
              &lt;li class="woods"&gt;&lt;a&gt;Woods&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  ul.tabs a {
    display: block;
    outline: none;
  }
  
  ul.tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
  
  }
  
  ul.tabs&gt;li {
    display: inline-block;
    position: relative;
    margin-top: 5px;
    margin-bottom: -1px;
  }
  </code></pre>
  
  <p></p>
  
  <p>What I want to do is keep the tabs right and make only the left tab stick to the left, but in the same time fill the area to the next tab. It is hard to explain so I posted an image:</p>
  
  <p><a href="http://s16.postimg.org/bhr4qzt51/002.jpg" rel="nofollow">http://s16.postimg.org/bhr4qzt51/002.jpg</a></p>
  
  <p>I do not know how to achieve it, maybe you know a trick.</p>