Basically, I have two cards side by side, and I want them to be of the same height irrespective of the content inside.
Here below is the code shared of the same.
Please solve for the large screen view.
What I Want
The top right card for the Second Semester is the max height I had, and I want all the cards in the same height irrespective of the different/less content.
Code
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-2 sm:p-10 flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-16 justify-center w-full">
<div
initial={{ opacity: 0.3 }}
whileInView={{ opacity: 1 }}
class="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute "
>
<div class="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100">
<!-- {/* main content */} -->
<div class="flex flex-col w-full">
<!-- {/* heading */} -->
<div class="flex flex-wrap sm:mx-auto sm:mb-2 -mx-2">
<div class="p-2 ">
<div class=" rounded-lg flex p-4 h-full justify-center items-center">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
class="text-indigo-500 w-6 h-6 flex-shrink-0 mr-4"
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="title-font text-blue-900 text-lg tracking-wide font-medium">
First Semester | 2020-21
</span>
</div>
</div>
</div>
<!-- {/* table */} -->
<div class="lg:px-4 lg:pb-2">
<table class="table-auto lg:w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 rounded-tl rounded-bl w-1/5">
Code
</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 w-4/5">
Name
</th>
</tr>
</thead>
<tbody class="text-gray-800 bg-gray-50/25">
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- {/* card2 chessmania*/} -->
<div
initial={{ opacity: 0.3 }}
whileInView={{ opacity: 1 }}
class="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute "
>
<div class="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100">
<!-- {/* main content */} -->
<div class="flex flex-col w-full">
<!-- {/* heading */} -->
<div class="flex flex-wrap sm:mx-auto sm:mb-2 -mx-2">
<div class="p-2 ">
<div class=" rounded-lg flex p-4 h-full justify-center items-center">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
class="text-indigo-500 w-6 h-6 flex-shrink-0 mr-4"
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="title-font text-blue-900 text-lg tracking-wide font-medium">
Second Semester | 2020-21
</span>
</div>
</div>
</div>
<!-- {/* table */} -->
<div class="lg:px-4 lg:pb-2">
<table class="table-auto lg:w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 rounded-tl rounded-bl w-1/5">
Code
</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 w-4/5">
Name
</th>
</tr>
</thead>
<tbody class="text-gray-800 bg-gray-50/25">
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="p-2 sm:p-10 flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-16 justify-center w-full">
<div
initial={{ opacity: 0.3 }}
whileInView={{ opacity: 1 }}
class="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute "
>
<div class="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100">
<!-- {/* main content */} -->
<div class="flex flex-col w-full">
<!-- {/* heading */} -->
<div class="flex flex-wrap sm:mx-auto sm:mb-2 -mx-2">
<div class="p-2 ">
<div class=" rounded-lg flex p-4 h-full justify-center items-center">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
class="text-indigo-500 w-6 h-6 flex-shrink-0 mr-4"
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="title-font text-blue-900 text-lg tracking-wide font-medium">
third Semester | 2020-21
</span>
</div>
</div>
</div>
<!-- {/* table */} -->
<div class="lg:px-4 lg:pb-2">
<table class="table-auto lg:w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 rounded-tl rounded-bl w-1/5">
Code
</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 w-4/5">
Name
</th>
</tr>
</thead>
<tbody class="text-gray-800 bg-gray-50/25">
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- {/* card2 chessmania*/} -->
<div
initial={{ opacity: 0.3 }}
whileInView={{ opacity: 1 }}
class="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute "
>
<div class="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100">
<!-- {/* main content */} -->
<div class="flex flex-col w-full">
<!-- {/* heading */} -->
<div class="flex flex-wrap sm:mx-auto sm:mb-2 -mx-2">
<div class="p-2 ">
<div class=" rounded-lg flex p-4 h-full justify-center items-center">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
class="text-indigo-500 w-6 h-6 flex-shrink-0 mr-4"
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="title-font text-blue-900 text-lg tracking-wide font-medium">
Fourth Semester | 2020-21
</span>
</div>
</div>
</div>
<!-- {/* table */} -->
<div class="lg:px-4 lg:pb-2">
<table class="table-auto lg:w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 rounded-tl rounded-bl w-1/5">
Code
</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100/50 w-4/5">
Name
</th>
</tr>
</thead>
<tbody class="text-gray-800 bg-gray-50/25">
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class="px-2 py-3">EN 407</td>
<td class="px-2 py-3">Chemistry for Energy Science</td>
</tr>
<tr>
<td class=" px-2 py-1">EN 409</td>
<td class=" px-2 py-1">Mathematical Foundation for Energy Science</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>