Within this lengthy div, there are 4 elements arranged as follows:
icon (fixed width)
item_name [needs to be accommodated]
item_type [needs to be accommodated]
item_date (fixed width)
I am currently attempting to find a way to ensure that the item_name and item_type always fit inside the div regardless of resizing.
For reference, here is a jsfiddle.
HTML
<div class="item">
<div class="icon"><i class="fa fa-file-text-o"></i></div>
<div class="item_date">7:25 AM</div>
<div style="border-top:1px solid green;width:500px;">
<div class="item_name">Item name</div>
<div class="item_type">Item type</div>
</div>
</div>
CSS
.item {
margin:0 auto;
height:50px;
background-color:#fff;
width:80%;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}
.item .icon {
float:left;
height:50px;
width:75px;
text-align:center;
border-top:1px solid blue;
font-size:23px;
color:#252525;
line-height:50px;
}
.item .item_date {
float:right;
text-align:right;
width:100px;
border-top:1px solid blue;
height:50px;
padding:0 25px;
font-size: 13px;
color:#999999;
line-height:50px;
}
.item .item_name {
float:left;
display: inline-block;
width:49%;
height:50px;
line-height:50px;
border-top:1px solid purple;
}
.item .item_type {
float:right;
display: inline-block;
width:49%;
height:50px;
line-height:50px;
text-align:center;
font-weight:bold;
border-top:1px solid yellow;
}