w3-css cards of equal height (fixed)

[sippytom]

Hi all,
Similar in idea to another post.
I have a series of cards in a shopping cart.
When I display them as quarter width, they are not the same height.
When they are displayed they get mixed up further down the page.
Here is the code I am using. (a what I have tried)

So what I need is the same height for each card.

 

Sorry I could not see where to add a code block.

 

<script>

#box{

height:150px;

overflow:scroll;

}

</script>

<div class="w3-quarter ">

<div id="box">

<div class="w3-card-2">

<div class="w3-container w3-theme-l2 w3-small">

<?php echo $d["name"]; ?>

</div>

<div class="w3-container w3-center">

<img src="<?php echo $d["thumb"] ?>" style="width:90%">

</div>

<div class="w3-container">

<div class="w3-small">Item Code: <b><?php echo $d["item_code"] ?></b></div>

<div class="w3-small">Price: <b><?php echo '$' .$d["retail_cost"] ?></b></div>

<br>

<p><?php echo truncate(htmlspecialchars_decode($d["description"]),200) ?></p>

<a class="w3-btn w3-theme-l4 w3-tiny w3-round-large" href=".?action=catalog&catID=<?php echo $d["id"]; ?> ">More Details</a>

</div>

<br>

</div>

</div>

</div>

[davej]

The <script> tag should be a <style> tag.