Card won't size to content

Question

Picture Example My cards aren't sizing to the individual tab content, and are instead stretching to try and fit both tabs at the same time. Tab one is displayed at the top, and tab four is displayed at the bottom. (Tab two, not shown, is in the middle and short. Tab three is blank.)

I tried putting the content in their own containers, but that didn't help. I'm new to HTML and not sure what I did wrong.

<div class="col-lg-9">
      
      <!-- card start -->
      <div class="card mr-5 px-5 py-3 w-75" style="background-color:#89CFF0">
My card starts like this
<div class="tab content">
          
          <!-- profile tab start -->
          
          <div class="tab-pane fade" id="profile">

        <div class="row pt-3">
          
          <div class="col-3">
            <p>text</p>
          </div>
          
          <div class="col-3">
            <p class="text-muted">text</p>
          </div>
          
          <div class="col-3">
            <p>text</p>
          </div>
          
          <div class="col-3">
            <p class="text-muted">text</p>
          </div>
          
        </div>
            
          </div>
          
          <!-- profile tab end -->

and my tabs are something like this (shortened example). Please respond with HTML instead of CSS if possible as CSS won't work on the site I'm using haha