0

I am trying to place two cards among each other beside one larger card using the materialize framework.

The code I am currently using looks like this:

<div class="row">   
<div class="col s6">
      <div class="card-panel">        
          <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p1</h5>
          </div>      
      </div>
</div>
<div class="col s6">
      <div class="card-panel">
        <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p3</h5> 
        </div>    
      </div>
</div>
<div class="col s6">
      <div class="card-panel">        
          <div class="card-content">
          <h5 class="blue-grey-text text-lighten-2">p2</h5>
          </div>      
      </div>
</div>
</div>

And the result looks like this:

img1

But I would like to place p1 and p2 directly beside p3, so that the layout looks like this:

img2

Is this somehow possible using materialize?

Ramona
  • 335
  • 1
  • 5
  • 18
  • If it uses flexbox *kinda* - https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css – Paulie_D Jan 07 '19 at 12:42
  • 1
    Try to keep p1 and p2 in first col s6 and p3 in another; this may resolve your issue. – Prashant Jan 07 '19 at 12:46
  • @prashant yes this solved my problem. Such I simple solution, but I really didn't come up with that. Thanks! – Ramona Jan 07 '19 at 12:48

1 Answers1

0

You can try something like this. 

<div class="row">
   <div class="col s6">
     <div class="row">
       <div class="col-12">
         P1
       </div>
     </div>
     <div class="row">
       <div class="col-12">
          p2
       </div>
     </div>
   </div>

   <div class="col s6">
      P3
   <div>
</div>
Gopi Tyro
  • 21
  • 1
  • 5