Make line height consistent across different fonts

Question

I have syntax highlighting code that produces a mix of fixed and sans-serif fonts.

The problem is that these have different heights:

.wrapper {
  float: left;
  border-bottom: 1px solid red;
  font-family: Arial, sans-serif;
}

.delim {
  font-family: Courier, fixed;
}

<div class="wrapper">
  <span class="delim">{</span>
  Content A
  <span class="delim">}</span>
</div>

<div class="wrapper">
  Content B
</div>

Depending on your fonts you should see something like this:

I want A and B to line up so that the red line appears to be continuous.

Note that I am not asking how to line up the bottom of the outer boxes, that's just so there's an easily demoable snippet - my underlying issue is that the height changes when the fixed width font content is added.

How do I keep it consistent so that the height of the line doesn't change as characters are added to it in different fonts?

Answer 1

You can set line-height on both so that it stays even. I added padding on the initial container just to give it some breathing room.

https://jsfiddle.net/6frqxrf4/

<div class="wrapper">
  <span class="delim">{</span>
  Content A
  <span class="delim">}</span>
</div>

<div class="wrapper">
  Content B
</div>

<div class="wrapper">
  <span class="delim-a">{</span>
  Content C
  <span class="delim-a">}</span>
</div>

.wrapper {
  float: left;
  border-bottom: 1px solid red;
  font-family: Arial, sans-serif;
  line-height: 12px;
  padding-bottom: 3px;
}

.delim {
  font-family: Courier, fixed;
  line-height: 4px;
}

.delim-a{
  font-family: Palatino;
  line-height: 4px;
}