JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="row">
   <div class="col-sm-4 row-sm-4">I'm squared</div>
   <div class="col-sm-4 row-sm-4">I'm too</div>
   <div class="col-sm-4 row-sm-4">yes, I'm too</div>
</div>

CSS

html, body {
    height: 100%; /* for test, expand height to allow column height works. */
}

[class^="col-"] {
    outline: 1px solid orange;/* for test */
}

.row {
    height: 100%; /* expand height to allow column height works. */
}

.row-sm-4 {
    align-self: stretch;
    height: 33.33333333%;/* same value as width but not exactly same unit in pixels */
}