remove <q-space></q-space> because it does nothing in your case (it is only for horizontal gaps, I think) add the class q-gutter-y-xl to the div in line 2 Explanation: That div contains three elements (two divs and the <hr>) which you want to space out. Whenever you want to add equal spacing between all elements, using a q-gutter class on the container does the trick (except when working with cols, then it’s q-col-gutter, see https://quasar.dev/layout/grid/gutter). (Alternatively, you could manually add margins to your rows or the separator, for example q-my-xl on the <hr> or the divs, but the gutter method is better) Also, consider replacing <hr> with <q-separator />.