guttered rows with different number of columns - how to line them up?

[yeechutngeow]

Let say I have two guttered rows but with different number of columns, like the following

<div class="row q-gutter-sm">
  <div class="col-5 outlined">col1</div>
  <div class="col-5 outlined">col2</div>
</div>
<div class="row">
  <div class="col-10 outlined">col1</div>
</div>

The second row will be shorter by the gutter width. Is there any way to line the two rows up?

Thanks.

[pdanpdan]

Put the gutter in the second row
you are using the wrong type of gutters for children with .col-xx class
https://codepen.io/pdanpdan/pen/qBKBPgj?editors=1010