Using inline-block and dealing with padding

There was a question in one of my Slack channels today. A developer was trying to display two elements horizontally using inline-block, but they kept appearing vertically. To be clear, there are a number of ways to get to the presentation that this person was attempting, but I didn’t consider that part of the exercise.

The problem stems with the way inline-block will pad elements whenever the HTML markup isn’t compressed.

For example:

This

<div>
    <div>1</div>
    <div>2</div>
</div>

Will render differently than this

<div><div>1</div><div>2</div></div>

Here’s a working example of what the developer was working with

See the Pen Inline Block with padding by Pete (@peterbenoit) on CodePen.