[SOLVED] How can I make the text the same height as the box

How can I make the text the same height as the box

I got the 2 div boxes and I want the text to be the same height as the box.

I tried setting 2rem for both the font-size and the box height. Obviously that is not how I make text and box the same height.

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Grid starting point</title>
  <style>
     :root {
      font-size: 1em;
    }
    
    .offer {
      font-size: 2rem;
      display: inline-block;
    }
    
    .box {
      width: 2rem;
      height: 2rem;
      background-color: #990000;
      display: inline-block;
    }
  </style>
</head>

<body>
  <header>
    <div class="offer">CARS FOR SALE</div>
    <div class="box"></div>
  </header>
</body>

</html>

Solution

You could use an ::after pseudo-element combined with the aspect-ratio property.

As the comments point out, the text increases the parent div height (which is always a little annoying) so you can adjust the line-height and font-size in order to counter that.

.offer {
  position: relative;
  font-size: 2rem;
  line-height: 1.5rem;
}

.offer::after {
  content: "";
  height: 100%;
  aspect-ratio: 1 / 1;
  background-color: #990000;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Grid starting point</title>
</head>

<body>
  <header>
    <div class="offer">CARS FOR SALE</div>
  </header>
</body>

</html>

NOTE: Thanks to César Venzac for pointing out this SO link that discusses changing the line-height.