Divs overlapping instead of stacking on top - css

Question

I am trying to have multiple divs stack on top of each other. Based on the responses of previously asked similar questions, I used a main container with relative positioning and absolute positioning of divs within. I Even tried giving them z-indexes but the Divs are still overlapping.
Please find the html below; Response 2 fully overlaps Response 1 Div.
body {
background-color: #dbdbdb;
}
h1 {
font-size: 20px;
font-style: normal;
color: #000000;
margin-top: 0px;
}
h2 {
font-size: 22px;
font-style: normal;
font-weight: normal;
color: #000000;
margin-top: 0px;
}
h3 {
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
margin-top: 0px;
}
p {
font-size: 20px;
font-style: normal;
color: #000000;
}
p.dataTitle {
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #000000;
}
.responsePanel {
border-style: solid;
border-width: 1px;
border-color: black;
}
.titleBar {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 50px;
}
.titleText {
position: relative;
left: 35px;
top: 0px;
}
.titleValue {
position: absolute;
left: 35px;
top: 24px;
}
.titleDataSource {
position: absolute;
right: 128px;
top: 34px;
}
.mugshotContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 52px;
width: 33%;
height: 420px;
}
.locationData {
position: relative;
left: 5px;
top: 0px;
}
.personNameContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0%;
top: 52px;
width: 100%;
}
.personName {
position: relative;
left: 5px;
top: 0px;
}
.personDescriptionContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 66.60%;
top: 52px;
width: 33.3%;
height: 420px;
}
.activityContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 66.60%;
top: 52px;
width: 33.3%;
height: 420px;
}
.personDescriptionData {
position: relative;
left: 5px;
top: 0px;
}
.personLocations {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 474px;
width: 100%;
height: 150px;
}
.personLocationsData {
position: relative;
left: 5px;
top: 0px;
}
table#locationsTable {
width: 99%;
}
table#locationsTable tr:nth-child(even) {
background-color: #eee;
}
table#locationsTable tr:nth-child(odd) {
background-color: #fff;
}
table#locationsTable th {
color: white;
background-color: black;
}
table#locationsTable td {
text-align: center;
}
#response1 {
position: relative;
width: 95%;
}
#response2 {
position: relative;
width: 95%;
}
.outer {
position: relative;
}
<div class="outer">
<div class="responsePanel" id="response1">
<div class="titleBar">
<div class="titleText">
<h1>Game 1</h1>
</div>
<div class="titleValue">
<h2>sas</h2>
</div>
<div class="titleDataSource">
<h3>Data Source: </h3>
</div>
</div>
<div class="personNameContainer">
<!---->
<p class="personName">xyz/p>
</div>
</div>
<div class="responsePanel" id="response2">
<div class="titleBar">
<div class="titleText">
<h1>what</h1>
</div>
<div class="titleValue">
<h2>xyz</h2>
</div>
<div class="titleDataSource">
<h3>Data Source: </h3>
</div>
</div>
<div class="personNameContainer">
<!---->
<p class="personName">blah blah</p>
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/qe36n9hm/1/