Why is the height of each individual p tag within each column dictated by the length of the string of text and not by the column height, even though bootstrap 4 comes pre-loaded with equal height columns? I just want each client bubble to appear uniform with the rest on the list. Any help would be amazing. Screenshots of the site and relevant code snippets are included.
list of clients with unequal heights
.clients {
width: 80%;
margin: auto;
}
.cli {
padding-top: 20px;
font-size: .9em;
background-color: rgb(255, 255, 255, .6);
padding: 38px;
cursor: pointer;
display: block;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 5px 20px #848888;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="clients">
<div class="row">
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Towson University Art Education Department</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Baltimore City Public Schools’ New Teacher Summer Institute</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Johns Hopkins University School of Education</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xl-4 ">
<p class="cli m-4">SOURCE at Johns Hopkins University</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">The Federal Judiciary Center</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Waverly Elementary/Middle School</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Baltimore Southwest Partnership</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">The Gallery Church Baltimore</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Urban Teachers Baltimore</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Baltimore Curriculum Project</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">Baltimore Collegetown Network</p>
</div>
<div class="col-sm-12 col-xl-4">
<p class="cli m-4">The Foundry Church Baltimore</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">
<p class="cli m-4">Clemson University Fellowship of Christian Athletes</p>
</div>
<div class="col-sm-12 col-lg-6">
<p class="cli m-4">Johns Hopkins Hospital Lifeline Critical Care Transport Team</p>
</div>
</div>
<br><br><br><br><br>
</div>
</div>
</div>