Height:auto expanding with min-height - html

Question

I am having issues getting .gridSecBlock to expand with height:auto in my viewport < 640. If you click on the jsfiddle link below and modify the viewport to be less than 640 pixels, you will see that the .gridSecBlock for the content .gridText isn't expanding like it should with height: auto. I have a min-height set, but do not want to have to adjust this for so many media queries.
Then for some reason my total-center class isn't centering the .gridSecBlock vertically for the content blocks.
Does anyone see what I am doing wrong?
Jsfiddle link to see mobile viewport
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.gridSecCont {
display: block;
height: 70vh;
}
.gridSecWrap {
width: 100%;
position: relative;
}
.gridSecBlock {
width: 50%;
height: 100%;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
}
.gridSecBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gridSecText {
text-align: left;
}
.gridSecBlockWrap {
width: 65%;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
/*--- Grid Section --*/
.gridSecCont {
display: block;
height: auto;
}
.gridSecBlock {
width: 100%;
height: auto;
display: block;
min-height: 270px;
}
.gridSecBlockWrap {
width: 75%;
height: auto;
padding: 10px 0;
}
}
<section id="gridSec">
<div class="gridSecWrap">
<div class="gridSecCont">
<div class="gridSecBlock left">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div><div class="gridSecBlock right gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
<div class="gridSecCont">
<div class="gridSecBlock right">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div><div class="gridSecBlock left gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

I think you can achieve what you are going for much easier with flexbox. I cleaned it up a bit and got rid of seemingly unnecessary divs and other styles.
Threw it into a codepen as well: https://codepen.io/samandalso/pen/MXbYNz
.gridSecCont {
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
}
.gridSecWrap {
width: 100%;
position: relative;
}
.gridSecBlock {
overflow: hidden;
flex-basis: 50%;
}
.gridSecBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gridSecText {
text-align: left;
flex-basis: 50%;
padding: 3rem;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
/*--- Grid Section --*/
.gridSecCont {
display: block;
height: auto;
}
.gridSecBlock {
width: 100%;
height: auto;
display: block;
min-height: 270px;
}
.gridSecBlockWrap {
width: 75%;
height: auto;
padding: 10px 0;
}
}
<section id="gridSec">
<div class="gridSecWrap">
<div class="gridSecCont">
<div class="gridSecBlock left">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div>
<div class="gridSecBlock right gridText">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
<div class="gridSecCont">
<div class="gridSecBlock right">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div>
<div class="gridSecBlock left gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</section>