CSS - Card not expanding to show entire text

Question

I'm working on a standard card to display information of data. In my card I have divs nested in my parent div in order to create the desired look I'm going for. I'm having an issue with my card not expanding to display all data. The remaining half of my card is left out and is displaying text outside of the card. I've tried adjusting css rules / and getting rid of some nested divs but even without any divs & text inside of the parent div it is still shaped the same way. I do not have any max-height / width restrictions in my css. Because of this, I'm unsure what is causing the card to be cropped off the way it is.

profile-card is the code that is generating the background color of the card.

I also removed the padding that I had originally on the card thinking this may have been a reason but it had no affect. I've included images at the bottom of this thread.

Here is my code :

 <div class="col-sm-4">
          <div class="profile-card">
                     <div>
                     <h3>$2.7tn</h3>
                         </div>
                           <div>                            
                             <h4>GROSS STATE PRODUCT</h4>
                                </div>
                               <div class="col-md-6"> 
                                <p> 
                                    Growth Rate 2013-18
                                </p>
                                </div>
                                <div>
                                    <p>State Growth Rank</p>
                                </div>                                
                              <div class="col-md-12">
                                  <div class="col-md-6"> 
                                      <p> +0.8% </p>
                                  </div>
                                  <div class="col-md-6"> 
                                      <p>1</p>
                                  </div>
                              </div>
                        </div>
                        </div>

CSS :

.profile-card {
    background: #2A365B;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
    border-radius: 3px;
}

.profile-card h3 {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 36px!important;
    line-height: 40px;
    /* or 111% */
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    border-radius: 6px;
}

.profile-card h4 {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */
    display: flex;
    align-items: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.profile-card p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

Answer 1

I was able to solve my issue by adding a <div class="row"> before the divs hold the card content

Answer 2

Just by copying your code your error is not reproducible. It may depend on more CSS that acts in the background.

May it have something to do with the overflow property?

Maybe try something like

.profile-card {
     overflow: visible;
}