Here is a fiddle you can check out: http://jsfiddle.net/thiswolf/RGe24/3/ to see the image div and the orange and middle divs stretch to match its height without padding the orange box towards the bottom.
Here is the HTML code:
<section class="les_head">
<article class="col-sm-3 les_pink faux_head">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2009/1/23/1232730572620/Isla-Mae-Lubbock-002.jpg" width="100%" />
</article>
<article class="col-sm-7 les_pink main_head">
<span class="the_name ">Ed,Edd and Eddy - Totally Bonkers </span>
<hr/>
<span class="the_icons">
<i class="glyphicon icon-twitter"></i> /
<i class="glyphicon icon-facebook"></i> /
<i class="glyphicon icon-skype"></i> /
<i class="glyphicon icon-google-plus"></i> /
<i class="glyphicon icon-dribbble"></i> /
<i class="glyphicon icon-github"></i></span>
</article>
<article class="col-sm-2 les_orange les_mail">
<i class="the_mail glyphicon glyphicon-envelope"></i>
<span class="mail_text">Mail</span>
</article>
</section>
And here is the CSS code:
.les_pink {
background-color:pink;
}
.les_orange {
background-color:orange;
}
.les_head {
display:inline-block;
border:1px solid red;
}
.faux_head {
position:relative;
height:auto;
display:inline-block;
}
.faux_head > img {
}
.les_mail {
}
.les_mail > i {
font-size:40px;
}
.the_mail {
display:block;
margin-left:28%;
}
.mail_text {
margin-left:33%;
}
Feel free to check out the fiddle and let me know how I can achieve the desired effect.