I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input.
Although I would normally use a fluid input in semantic-ui for this, it doesn't seem to work as expected inside a semantic-ui menu. When I apply 'fluid', the input actually becomes smaller.
Is there a way to get the center input to stretch to full-width between the other two inputs using just semantic-ui?
<div class="ui fixed borderless menu">
<div class="header">
<a href="/" class="">
<img src="logo.png">
</a>
</div>
<div class="item">
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" placeholder="search">
</div>
</div>
<div class="right item">
<div class="ui left icon input">
<i class="map outline icon"></i>
<input type="text" placeholder="location">
</div>
</div>
</div>