div not resizing with content - html

Question

Sorry if this is a duplicate question, but I couldn't find an exact match to this which worked, so here it goes.
I have a web page with divs for each database entry. However, the div doesn't resize with text, causing the text to display out of div. I'm using bootstrap.
I've attached a fiddle.
Increase the width of the fiddle output to see the overflowing text.
Currently, i'm working on just the desktop version, but i'll have to build a mobile version as well. So it'll be better if you can help me out with both :)
Below is my code
.each-entry-box {
min-height: 80px;
max-height: 110px;
width: 80%;
background: #F5F5F5;
margin: 10px;
border-radius: 5px;
position: relative;
}
.each-entry-box-header {
height: auto;
width: 100%;
background: #E6E6FA;
margin: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: absolute;
padding: 2px;
}
.main-content {
margin: 15px;
top: 30px;
position: relative;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="each-entry-box">
<div class="each-entry-box-header">
<div class="col-md-9 customer-name">
<i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span>
</div>
<div class="col-md-3 added-on">
<i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span>
</div>
</div> <!-- each-entry-box-header ends here -->
<div class="main-content">
<div class="col-md-12">
<div class="col-md-3 customer-mobile">
<i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span>
</div>
<div class="col-md-9 customer-email">
<i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span>
</div>
</div>
<div class="col-md-12">
Material : None
</div>
<div class="col-md-12">
<div class="col-md-4">
XYZ : None
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>

Answer 1

Here's a working JS Fiddle,
I've floated both divs and removed the absolute positioning, I've also changed the background colour from the parent element to the child element, so as the list grows, the background will too
HTML:
<div class="each-entry-box">
<div class="each-entry-box-header">
<div class="col-md-9 customer-name">
<i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span>
</div>
<div class="col-md-3 added-on">
<i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span>
</div>
</div> <!-- each-entry-box-header ends here -->
<div class="main-content">
<div class="col-md-12">
<div class="col-md-3 customer-mobile">
<i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span>
</div>
<div class="col-md-9 customer-email">
<i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span>
</div>
</div>
<div class="col-md-12">
Material : None
</div>
<div class="col-md-12">
<div class="col-md-4">
XYZ : None
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
CSS:
.each-entry-box{
min-height: 80px;
max-height: 110px;
width: 80%;
background: #F5F5F5;
margin: 10px;
border-radius: 5px;
position: relative;
}
.each-entry-box-header{
height: auto;
width: 100%;
background: #E6E6FA;
margin: 0;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
/* position: absolute; */
padding: 2px;
float: left;
}
.main-content{
/* margin: 15px; */
/* top: 30px; */
/* position: relative; */
width: 100%;
background: #F5F5F5;
float: left;
clear: left;
}

Answer 2

.main-content should not have relative position. For mobile responsive styles, you can use col-sm- and col-xs-:
.each-entry-box {
min-height: 80px;
max-height: 110px;
width: 80%;
background: #F5F5F5;
margin: 10px;
border-radius: 5px;
position: relative;
}
.each-entry-box-header {
height: auto;
width: 100%;
background: #E6E6FA;
margin: 0;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
position: absolute;
padding: 2px;
}
.main-content {
margin: 15px;
margin-top: 25px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="each-entry-box row">
<div class="each-entry-box-header">
<div class="col-md-9 customer-name col-sm-9 col-xs-8">
<i class="glyphicon glyphicon-user glyphicon-class"></i><span>customer name</span>
</div>
<div class="col-md-3 added-on col-sm-3 col-xs-4">
<i class="glyphicon glyphicon-time glyphicon-class"></i><span>time</span>
</div>
</div> <!-- each-entry-box-header ends here -->
<div class="main-content">
<div class="col-md-12">
<div class="col-md-3 customer-mobile col-sm-3">
<i class="glyphicon glyphicon-earphone glyphicon-class"></i><span>mobile number</span>
</div>
<div class="col-md-9 customer-email col-sm-9">
<i class="glyphicon glyphicon-envelope glyphicon-class"></i><span>No email ID added</span>
</div>
</div>
<div class="col-md-12">
Material : None
</div>
<div class="col-md-12">
<div class="col-md-4">
XYZ : None
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>