I try to get two divs in a row. One fixed (220px), the other fills the rest of the page so it's always 100% in total.
I've also read similar threads like this one: Two divs in one row
I tried several approaches, Bootstrap, Flexbox, Floating Divs, in the end I used calc, but I couldn't get 100% accurate results.
My favorite approach would be with Bootstrap, but I couldnt get this to work, no matter if with a grid or other options.
The actual approach seems kinda messy: Whenever I use calc() and substract the same width of the first container, it's displayed in a second row. Only when I substract 4px more, it's shown in the same line.
I guess this is the right and the left border of both divs or so. There's also a little margin between the divs, even if I set margin to 0px.
<div style="width:220px; display:inline-block; background-color:#F00; margin: 0px;">
1
</div>
<div style="width: calc(100% - 224px); display:inline-block; background-color:#FF0; margin: 0px;">
2
</div>
My question is easy: How can I do this accuratly?