Make height of div fit text inside it

Question

How should I style my div elements, so that the text inside of it, will make the height bigger on small screens? I don't want to change the font. If the height doesn't get bigger, than the text overflows. This is an example of this phenomena.

Also made a pen, if you prefer working with it.

I found this answer which I believe is what I am looking for, but didn't grasp how exactly should I do my modifications.

#index-customer-title {
  margin: 40px 20px 40px 20px;
}
#test-wrapper {
  top: 0;
  left: 0;
  right:0;
  height: 240px;
  max-width: 1200px;
  text-align: left;
  margin: auto;
  position: relative;
}
#test-first {
  display: inline;
  width: 44%;
  float: left;
  height: 200px;
  margin-left: 3.33%;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
#test-second {
  display: inline;
  width: 44%;
  float: right;
  height: 200px;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
.quotes {
  font-style: italic;
  padding-top: 10px;
  font-size: 18px;
}

<div id="test-wrapper">
  <div id="test-first">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
  </div>

  <div id="test-second">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
    </blockquote>
  </div>
</div>

Answer 1

Instead of static height you can use min-height or height: auto, that way the height adapts to it's content

#index-customer-title{
margin:40px 20px 40px 20px;
}

#test-wrapper{
top:0;
left:0;
right0;
height:auto;

max-width:1200px;
text-align:left;
margin: auto;
    position: relative;

}
#test-first{
display:inline;
width:44%;
float:left;
min-height:200px;
margin-left:3.33%;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left;
display:inline-block;
border:2px solid #d5d5d5;




}

#test-second{
dislay:inline;
width:44%;
float:right;
height:auto;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left
display:inline-block;
border:2px solid #d5d5d5;

}

.quotes{
font-style:italic;
padding-top:10px;
font-size:18px;
}

<div id="test-wrapper">
	<div id="test-first">
		<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
	</div>

	<div id="test-second">
		<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
		</blockquote>
	</div>
</div>

Answer 2

First of all, you can put min-height: 200px instead of height: 200px for test-first and test-second and that solves your problem.

Some suggestions:

1. Its better to clear the float if you have more content below test-wrapper:

   #test-wrapper:after {
     content: '';
     display: block;
     clear: both;
   }
   

2. Also you don't need to set height for test-wrapper

#index-customer-title {
  margin: 40px 20px 40px 20px;
}
#test-wrapper {
  top: 0;
  left: 0;
  right:0;
  /*height: 240px;*/
  max-width: 1200px;
  text-align: left;
  margin: auto;
  position: relative;
}
#test-first {
  display: inline;
  width: 44%;
  float: left;
  min-height: 200px;
  margin-left: 3.33%;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
#test-second {
  display: inline;
  width: 44%;
  float: right;
  min-height: 200px;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
.quotes {
  font-style: italic;
  padding-top: 10px;
  font-size: 18px;
}
#test-wrapper:after {
  content: '';
  display: block;
  clear: both;
}

<div id="test-wrapper">
  <div id="test-first">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
  </div>

  <div id="test-second">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
    </blockquote>
  </div>
</div>

Cheers!