I am trying to incorporate bootstrap cards into a form without using a normal link. The intention is to send the data along with other information via POST method.
However, I am facing an issue with the display. The blocks should maintain the same height, which is achieved when no link is added. But as soon as I link them, the uniformity is lost.
I have included the code below.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<li>Einbindung der CSS Dateien und Javascribt Dateien</li>
</head>
<body>
<div class="container-xl">
<div class="row">
<div class="col-6 col-md-3 col-lg-2 d-flex">
<div class="card card-body flex-fill">
<p>Long text. Long text. Long text.</p>
</div>
</div>
<div class="col-6 col-md-3 col-lg-2 d-flex">
<div class="card card-body flex-fill">
<p>Short text.</p>
</div>
</div>
</div>
--------------------------------------
<form>
<div class="row">
<div class="col-6 col-md-3 col-lg-2 d-flex">
<label><input type="submit" name="geraete-kategorie" class="card-input-element" value="<?=$row['id'] ?>"/>
<div class="card card-body card-input flex-fill">
<p>Long text. Long text. Long text.</p>
</div>
</label>
</div>
<div class="col-6 col-md-3 col-lg-2 d-flex">
<label><input type="submit" name="geraete-kategorie" class="card-input-element" value="<?=$row['id'] ?>"/>
<div class="card card-body card-input flex-fill">
<p>Short text.</p>
</div>
</label>
</div>
<div class="col-6 col-md-3 col-lg-2 d-flex">
<label><input type="submit" name="geraete-kategorie" class="card-input-element" value="<?=$row['id'] ?>"/>
<div class="card card-body card-input flex-fill">
<p>Short text.</p>
</div>
</label>
</div>
</div>
</form>
</body>
</html>
Live site:
Could use some help with CSS modifications to make the code functional.