Help with a seemingly easy task: 3 cards

[ilabutk]

Struggle with a seemingly easy task: how to make cards 1 & 2 to align to the left/right of card 3; or let card 3 aligns perfectly to card 1’s left and card 2’s right? (It also needs to be responsive.) Thanks!

<template>
<div class="q-mx-sm q-pb-xs">
  <div class="row justify-around">
    <div class="col-md-5 col-xs-12 q-pa-sm">
      <q-card style="height: 200px">
        <q-card-section dense class="bg-primary text-center text-white" >
          <div class="text-h6">card 1 </div>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-md-5 col-xs-12 q-pa-sm">
      <q-card style="height: 200px">
        <q-card-section dense class="bg-primary text-center text-white" >
          <div class="text-h6">card 2</div>
        </q-card-section>
      </q-card>
    </div>
  </div>

  <div class="column q-pa-sm">
    <q-card style="height: 200px">
      <q-card-section dense class="bg-primary text-center text-white" >
          <div class="text-h6">card 3</div>
        </q-card-section>
    </q-card>
  </div>
</div>
</template>

[s.molinari]

Like this?`

https://codepen.io/smolinari/pen/oNbBWqG

Scott

[ilabutk]

Thanks. It did not but it inspired me. (Also, they were in a router view. The outside layout messes it up. This worked:

<div class="row q-col-gutter-md q-pt-md">
      <div class="col-xs-12 col-sm-6  col-md-6">
        <q-card style="height: 200px">
          <q-card-section dense class="bg-primary text-center text-white" >
            <div class="text-h6">card 1 </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6">
        <q-card style="height: 200px">
          <q-card-section dense class="bg-primary text-center text-white" >
            <div class="text-h6">card 2</div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-12">
        <q-card style="height: 200px">
          <q-card-section dense class="bg-primary text-center text-white" >
              <div class="text-h6">card 3</div>
            </q-card-section>
        </q-card>
      </div>
    </div>

[s.molinari]

Great. Glad you figured it out.

Scott