Why does this grid item not align to the bottom of the row like the other items?

Question

I'm working on a far larger project but have managed to isolate this example of my issue:

this gives me a result like:

As you can see, the final closing parenthesis ) is not aligned to the bottom. I've tried wrapping it in another div, setting vertical-align etc, but nothing will make it go down.

The goal is to have the .underline <div> take up as much space as it can, with the other parts surrounding it. I don't even care if it's in a grid tbh, it's just the only way I know how to do that.

.gridContainer {
  display: grid;
}

.gridItemContainer {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: table;
  text-align: center;
}

.alignMiddle {
  vertical-align: middle;
}

.left {
  text-align: left;
}

.fl::first-letter {
  font-size: 2rem;
}

.square:before {
  content: '\25A0';
  font-size: 1.5em;
}

.underline {
  border-bottom: .3rem solid #000000;
  margin: .4rem .3rem;
}

<div class="gridContainer">
  <div style="grid-row:1; grid-column:1;">
    <div class="gridItemContainer">
      <div class="alignMiddle left" style="display:grid;grid-template-columns:max-content auto min-content;">
        <div style="grid-column:1;grid-row:1;" class="fl">Craft <span class="square"></span>(</div>
        <div class="underline" style="grid-column:2;grid-row:1;margin:0;"></div>
        <div style="grid-column:3;grid-row:1;">)</div>
      </div>
    </div>
  </div>
</div>

Answer 1

Since you're not wedded to grid, you could use flexbox instead? Use align-items: baseline to put all your text on the same line then use align-self: flex-end to position your underline.

.container {
  display: flex;
  align-items: baseline;
}

.square:before {
  content: '\25A0';
  font-size: 1.5em;
}

.underline {
  flex-grow: 1;
  border-bottom: .3rem solid #000000;
  align-self: flex-end;
}

<div class='container'>
  <div>Craft <span class="square"></span>(</div>
  <div class="underline"></div>
  <div>)</div>
</div>