How do I make vertical height of cards vary in Materialize CSS? - css

Question

I am trying to make it like an admin panel thingy. and for that, I am going for a pannel look and since I want it to be a little irregular I want the size of cards to vary. This is what I want to fix:
I don't want the space that I have crossed out with red and I want the thing on the right to extend beyond its row, and I don't know how to do that?
My code(I am using Django and Materialize and a custom styling sheet for colours):
<div class="container">
<div class="row">
<div class="col s3">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Networth</span>
<h3 class="center-align cardVtext">{{net_worth}}</h3>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Balance</span>
<h3 class="center-align cardVtext">{{balance}}</h3>
</div>
</div>
</div>
<div class="col s2">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">% Increase</span>
<h3 class="center-align cardVtext">{{percentage_increase}}</h3>
</div>
</div>
</div>
<div class="col s4">
<div class="card right ">
<div class="card-content Vgrey white-text">
<table class="highlight centered responsive-table">
<thead>
<tr>
<th>Company</th>
<th>Stocks Owned</th>
</tr>
</thead>
<tbody>
{% for stock in portfolio %}
<tr>
<td>{{stock.stock_ticker}}</td>
<td>{{stock.stocks_owned}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div> <!--First row ends here-->
<div class="row">
<div class="col s8">
<div class="card">
<div class="card-content Vgrey white-text">
<span class="card-title">Networth</span>
<canvas id="myChart"> </canvas>
</div>
</div>
</div>
</div> <!--second row ends here-->
</div><!--Container ends here-->

Answer 1

This was answered very well by a user on Reddit by the name of jonassalen.
You just need another column layout in this example.
First a row with 2 columns: In that first column you put the block
with the 3 columns and the bigger block beneath. In the second column,
you put the block on the right.