I’m trying to create a CSS grid that looks like this, but it seems my implementation leaves gap between element A and B

This is my implementation

html

<div class="box-wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">very long text here lorum ipsum doloris lorum ipsum doloris</div>
  <div class="box d">D</div>
</div>

CSS

.box-wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(3, minmax(0, min-content));
  background-color: orange;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: 1 / 2;
  grid-row: 1;
  width: min-content;
}

.b {
  grid-column: 2 / 3;
  grid-row: 1;
  width: min-content;
}

.c {
  grid-column: span 2;
  grid-row: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.d {
  grid-column-end: -1;
  grid-row: span 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto;
}

The long text on the c block expands the row of column A and B and creates a gap between them. How can I make column A and B next to each other without much space?

Here is a working fiddle https://jsfiddle.net/kto7w2Lr/