in first column only top 5 college, next column remaiaing 3

 

<main class="flex-1 p-6 md:p-10">
            <div class="grid gap-6 grid-cols-2 md:grid-cols-2">
                <!-- Top 5 Colleges Section -->
                <div class="rounded-lg bg-card border shadow-sm" data-v0-t="card">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">Top 5 Colleges Historical Performance</h3>
                        <div id="top5Colleges" class="space-y-2 mb-4"></div>
                        <div style="height: 300px;">
                            <canvas id="top5Chart"></canvas>
                        </div>
                    </div>
                </div>


                <!-- Overall Pass Percentage and Historical Chart Section -->
                <div class="rounded-lg bg-card border shadow-sm" data-v0-t="card">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">Overall Pass Percentage</h3>
                        <p id="overallPassPercentage" class="text-3xl font-bold mb-4"></p>
                    </div>
                </div>
                <div class="rounded-lg bg-card border shadow-sm" data-v0-t="card">
                    <div class="p-4">
                        <h4 class="text-lg font-semibold mb-2">Historical Pass Percentage</h4>
                        <div style="height: 200px;">
                            <canvas id="historicalChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="rounded-lg bg-card border shadow-sm" data-v0-t="card">
                    <div class="p-4">
                        <h4 class="text-lg font-semibold mb-2">Historical registered student</h4>
                        <div style="height: 200px;">
                            <canvas id="historicalRegisteredChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Full College Ranking List -->
                <div class="rounded-lg bg-card border shadow-sm col-span-1 md:col-span-2" data-v0-t="card">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">College Ranking</h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b">
                                        <th class="p-2 text-left font-medium text-gray-500">Rank</th>
                                        <th class="p-2 text-left font-medium text-gray-500">Name</th>
                                        <th class="p-2 text-left font-medium text-gray-500">Reg.</th>
                                        <th class="p-2 text-left font-medium text-gray-500">Pass</th>
                                        <th class="p-2 text-left font-medium text-gray-500">Pass %</th>
                                    </tr>
                                </thead>
                                <tbody id="collegeTableBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>