Как не сморщивать белое фоновое поле, когда нет текста или есть только пустое пространство

Вы можете попробовать два разных решения:

• Добавление   в качестве содержимого элемента html, когда он должно быть пусто.
• Или вы можете добавить атрибут стиля css min-height: 1em; в правила адресации заголовка и описания. (Я исправил эту часть по сравнению с тем, что я писал ранее)

Я выбрал второй вариант здесь, потому что он соответствует произвольно выбранному размеру шрифта css и не требует изменения логики для заполнения содержимого, добавляя непустое пространство, когда оно пусто:

.dashboard-data-field {
  display: grid;
  grid-auto-flow: row;
  align-content: center;

  /*the field background is yellow to get contrast with the description bg*/
  background-color: yellow;
}
.dashboard-data-header {
  display: block;
  padding: 4px;

  /*this shows the size of the header*/
  border: solid 1px red;

  /*minimum height is 1em even when the content is empty*/
  min-height: 1em;
}
.dashboard-data-description {
  display: block;
  padding: 8px;

  /*this background will cover the parent background*/
  background-color: #fff;

  /*this shows the size of the header*/
  border: solid 1px red;
  border-top: none;

  /*minimum height is 1em even when the content is empty*/
  min-height: 1em;
}

<div class="dashboard-data-field">
  <span class="dashboard-data-header">Header with content</span>
  <span class="dashboard-data-description">Description with content</span>
</div>

<br>

<div class="dashboard-data-field">
  <span class="dashboard-data-header"></span>
  <span class="dashboard-data-description"></span>
</div>

Дайте фиксированную высоту для охвата того места, где вы хотите показать текст

.dashboard-data-field {
    display: grid;
    grid-auto-flow: row;
    align-content: center;
  }
  .dashboard-data-header {
    padding: 4px;
  }
  .dashboard-data-description {
    padding: 8px;
    background-color: red;
    height: 40px;
  }

const App = () => {
  return (
    <>
      <div className="dashboard-data-field">
        <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
        <span className="dashboard-data-description">with text</span>
      </div>
      <div className="dashboard-data-field">
        <span className="dashboard-data-header">ชื่อ-นามสกุล</span>
        <span className="dashboard-data-description"></span>
      </div>
    </>
  );
};

export default App;