Responsive pricing card using CSS Grid

I would like to know about some CSS quirks.

I found out about a quirk of CSS. I don't know what it's called exactly but basically if 2 divs are inline-blocks, declared to take 50% of the width they will NOT stay side-by-side unless the start tag of the second div is right after the end tag of the first div. This way there will be no whitespace between the two divs and 50% + 50% = 100%. This won't happen normally. Therefore I call it the "Whitespace Quirk".

I would like to know any quirks that you guys might know of so that I can deal with them beforehand.