How to align elements in a flutter wrap evenly and independent of the width of the content - Stack Overflow

How can I realize the following layout in Flutter?

Musthave is at scale factor 1 of the font that 2 elements (= a column consisting of heading and value) should be displayed per line. If the display size becomes too small or the scale factor of the font becomes greater than 1 (accessibility), the layout should break so that only one element per line is displayed and the other element moves to the next line. This is why I use “Wrap” in my current solution.

Here's my code sample:

return SizedBox(
  width: double.infinity,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Wrap(
        spacing: 32,
        runSpacing: 16,
        alignment: WrapAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CustomLabeledValue(
                label: tr(LocaleKeys.installmentsLabel),
                value: installmentPlan.numberOfInstallments.toString(),
              ),
              const SizedBox(height: 16),
              CustomLabeledValue(
                label: tr(LocaleKeys.dateFirstInstallment),
                value: formatDate(DateUtils.dateOnly(installmentPlan.startDate)),
              ),
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CustomLabeledValue(
                label: tr(LocaleKeys.installmentPlanStartLabel),
                value: tr(LocaleKeys.installmentPlanStartValue, args: [installmentPlan.startDate.day.toString()])
              ),
              const SizedBox(height: 16),
              CustomLabeledValue(
                label: tr(LocaleKeys.dateLastInstallment),
                value: formatDate(
                  installmentPlanpletionInstallmentDate,
                ),
              ),
            ],
          ),
        ],
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        child: Divider(color: Resource.color.salmon),
      ),
      Wrap(
        spacing: 32,
        runSpacing: 16,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CustomLabeledValue(
                label: tr(LocaleKeys.monthlyInstallment),
                value: formatCurrency(installmentPlan.monthlyInstallment),
              ),
              const SizedBox(height: 16),
              CustomLabeledValue(
                label: tr(LocaleKeys.invoiceAmount),
                value: formatCurrency(installmentPlan.invoiceAmount),
              ),
              if (!(installmentPlan.isFree ?? true)) ...[
                const SizedBox(height: 16),
                CustomLabeledValue(
                  label: tr(LocaleKeys.termInterestRates),
                  value: formatCurrency(installmentPlan.termInterest),
                ),
              ],
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CustomLabeledValue(
                label: tr(LocaleKeys.finalInstallment),
                value: formatCurrency(installmentPlan.lastInstallment),
              ),
              const SizedBox(height: 16),
              CustomLabeledValue(
                label: tr(LocaleKeys.financingAmount),
                value: formatCurrency(installmentPlan.financingAmount),
                infoText: tr(LocaleKeys.infoTextFinancingAmount),
              ),
              if (!(installmentPlan.isFree ?? true)) ...[
                const SizedBox(height: 16),
                CustomLabeledValue(
                  label: tr(LocaleKeys.totalAmount),
                  value: formatCurrency(installmentPlan.totalAmount),
                ),
              ],
            ],
          ),
        ],
      ),
    ....

Now the problem: When using Wrap, the placement of the widgets is based on the width of the previous widget. If the 1st element of the 1st wrap is larger than the 1st element of the 2nd wrap, the 2nd elements are no longer flush. The result then looks like this.

Is there a solution for aligning the elements of the wrap widgets so that they are flush with each other? Alternatively, could a GridView be used for this?