How can I fix this spacing on checkout page?

Hi there,

Tables are notoriously a pain the backside even before adding Woocommerce into the equation.
According to CSS specification its impossible to have variable width columns within various rows within a table....

But after a lot of head banging i (think i) may have found a better solution with this CSS:

/* Force table to behave with flexbox */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table {
    display: flex;
    flex-wrap: wrap;
}
/* Force all items to fill available space */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table * {
    flex: 1;
    box-sizing: border-box;
}
/* Force thead/tbody/tfoot to fill 100% of space */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table > * {
    flex: 1 0 100%;
}
/* Control table rows with flex */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr {
    display: flex;
}
/* Make item descriptions 60%+ of the table width */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead th:nth-of-type(odd),
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table .cart_item td:nth-of-type(odd) {
        flex: 1 0 60%
}
/* Fix tfoot headings ( subtotal, shipping etc.) to occupy maximum of 130px */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
    flex: 0 0 130px;
}
/* Corect text alignment on right hand columns */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table .cart_item td:nth-of-type(even),
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td:nth-of-type(odd),
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead th:nth-of-type(even){
    text-align: right;
}

Perfect! Now it looks exactly like it should.

Thank you so much!