This sort of CSS failure:

div { display: inline-block; width: 50%; }
span { display: inline-block; width: 50%; }

<div>go left</div>
<span>go right dammit</span>

Because of the inline space they don't do what you want?

@craig939393 Yeah I'm aware. The point is that CSS should've solve this type of issue instead of having to rely on HTML by putting a comment in between the 2 tags. I mean, isn't that the point of CSS? Now I know there are workarounds in CSS but as all workarounds do, they aren't looking as intuitive as what should've been the expected solution, like the code above.

I wouldn't use inline block for layouts because it's intended to render like text, ie inline. In that sense it does what it's supposed to.

When I started I use a container, and then floats inside that and a clear fix on the container.

Ow I use flex or css grid but floats are easier if new.

Fair point about inline blocks. But then again, I'm not having it in terms of clarity. With minimal elements and simpler properties involved, it's easier to get the intention of the CSS rules above than with other solutions.

But I suppose there's no choice other than to suck it up and accept that side of CSS-land.

It's not really that side so much as that's just how css is. Inline and inline-block are not intended for layout.

Css grid is really nice for layouts.

Agreed. *Browser incompatibility intensifies*

You probably k ow this but just incase I advocate caniuse.com for browser compatibility. I used to rage back in the day.