This is what it's supposed to look like:
The goal here is to have the red element on the left expand to fill the remaining space beside its content, as well as the grey on the right. I am utilizing bootstrap which means the center elements occupy 1170px, or 1140px if we exclude the padding. My attempt involved adding before and after children to the first and last elements and using absolute positioning in an effort to stretch them all the way to the screen margins. However, I'm struggling with a reliable method for calculating that length, and I can't use overflow due to the main element containing dropdowns. Any suggestions?
This is the HTML structure:
<div class="body-width-container">
<div class="container">
<div class="battery-finder battery-finder--inactive">
<div class="battery-finder__label">
Choose Battery
</div>
<div class="battery-finder__icon">
<i class="icon icon-battery"></i>
<div class="battery-finder__icon::after"></div>
</div>
<div class="dropdown battery-finder__select battery-finder__select--fuel">
<button class="dropdown-toggle" type="button" data-toggle="dropdown">
Fuel Type
<i class="icon icon-fuel"></i>
<span class="battery-finder__select__arrows">
<i class="fa fa-angle-up"></i>
<i class="fa fa-angle-down"></i>
</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
<!-- Add rest of the HTML code-->
<button class="battery-finder__button">
<i class="icon icon-magnifier"></i>
</button>
</div>
</div>
</div>
Here is the CSS used:
.container .battery-finder__label:before{
content: "";
display: block;
height: 100%;
position: absolute;
left: -1000px;
right: 100%;
background-color: inherit;
}
.container .battery-finder__button:before{
content: "";
display: block;
height: 100%;
position: absolute;
right: -1000px;
left: 100%;
background-color: inherit;
}
.body-width-container {
overflow: hidden;
}