Semantic Ui Menu Full Width Item

Question

I have an application with a simple menu which will have 3 main items. A header item, a search input item and a settings item. I define the menu like so:

<div class="ui menu">
  <div class="left header item">

  </div>
  <div class="item">
    <div class="ui icon input">
      <input placeholder="Search..." type="text">
      <i class="search link icon"></i>
    </div>
  </div>
  <div class="right">

  </div>
</div>

The problem is that I want the middle item to take up as much room as possible (i.e extend from the first item to the last item). Is there a property which would allow the item to take up as much space as possible

Answer 1

Saomething like this should work :

<div class="ui menu stackable">
    <div class="ui three column stackable grid container"  style="margin:0;">
        <a href="#" class="item three wide column">
            Home
        </a>
        <div class="ui search item ten wide column">
            <div class="ui icon input">
                <input class="prompt" type="text">
                <i class="search link icon"></i>
            </div>
            <div class="results"></div>
        </div>
        <div class="ui dropdown search item three wide column">
            <input type="hidden" value="en">
            <div class="default text">Something</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item" data-value="1"><i class="en flag"></i>item 1</div>
                <div class="item" data-value="2"><i class="en flag"></i>item 2</div>
                <div class="item" data-value="3"><i class="en flag"></i>item 3</div>
            </div>
        </div>
    </div>
</div>

Jsfiddle demo