Intentional Overlapping Cards in Bootstrap - text is pushed off to the side

I have a design I am coding using Bootstrap which has overlapping cards. I have the layout working (with a little help from jQuery) but the text on the top cards is pushed off to the side of the bottom card.

I'm stumped as to how I might get the top card content . (i.e. the XXXs) properly aligned in their respective top cards.

Here is a screenshot of how it looks today.

I'd like it to look like this:

Here is the code:

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;        
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>      
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                        888<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>