HTML-контент неожиданно корректирует мой CSS

У меня есть компонент React, который разделен на 3 части и содержит 3 разных значения данных: дату, название и сумму. Макет выглядит хорошо и выровнен, но когда я добавляю значение в первый раздел (красный), он настраивает мой CSS очень странным образом, и я не могу понять, почему. Первое изображение показывает сам компонент, второе изображение показывает компонент с содержимым HTML внутри него.

Расход.js

  <div className="expense">
  <div className="date">
        <h6>DEMO!</h6>
  </div>
  <div className="title">

  </div>
  <div className="amount">

  </div>

Расход.css

.expense {
    border: 1px darkslategrey solid;
    height: 100px;
    display: flow-root;
}

.date {
    display: inline-block;
    background-color: darkred;
    width: 20%;
    height: 100%;
}

.title {
    display: inline-block;
    background-color: darkorange;
    width: 60%;
    height: 100%;
}

.amount {
    display: inline-block;
    background-color: darkgreen;
    width: 20%;
    height: 100%;
}