вложенный css с нахальным в детей div детей

Question

У меня есть div и некоторые дети и потомки снова внутри div, этот блок - 2 блока, но inline-flex, что я хочу, так это то, что я хочу закрасьте этот белый прямоугольник справа, чтобы он был цветом grey, а слева - цветом pink

, это мой s css:

.do-flex {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .detail_cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .detail_cards > * {
    margin-right: 2%;
    .detail_items {
      .detail_form {
        input {
          background-color: #F2F4F7;
        }
      }
    }
  }
}

, а здесь мой html:

<div class="detail_cards">
<div class="detail_items">
  <label>Bill
    <div class="input-group detail_input">
      <span class="input-group-addon" id="add_ons">$
        <input class="form-control detail_box" value="599"></input>
      </span>
    </div>
  </label>
</div>
<div class="detail_items">
  <label> New bill date
    <div class="input-group detail_input">
      <input class="form-control detail_box" style="border-radius: 4px;" value="01/01/21"></input>
    </div>
  </label>
</div>
</div>