I have organized two divs in a grid layout like this:
<div>
<div class="col-1-10 a">...</div>
<div class="col-9-10 b">...</div>
</div>
My goal is to set the minimum width of the div with the class col-1-10 to 85 px in order to accommodate specific items as required. The other div with the class col-9-10 should take up the remaining width.
Currently, I am using the following CSS:
.a{
@media (max-width: 850px){
width:85px;
}
}
.b{
@media (max-width: 850px){
max-width:765px;
}
}
While this solution works for the first div, the second one ends up being displayed below rather than inline. Essentially, I want the width of the second div to be equal to the width of the parent div minus 85 pixels, and all done through CSS alone
Any assistance on achieving this would be greatly appreciated.
Thank you in advance