Two columns same height - Bootstrap - CSS - html

Question

Currently I'm creating a product box with two columns near each other, left one have the product image and right one product description.
The main problem is, I'm trying to make the product description the same height as the image, but after few tries I didn't get close to solve it, because it needs to be responsive. I tried a lot of solutions but still stuck, the closest one was using media queries and apply height to the .product-det but seems like it's not the good way.
I have create a Bootply as a demo.
The blue border must reach the bottom of the wrapper.
HTML
<div class="container">
<div class="col-xs-6">
<div class="col-xs-12 padding-15 margin-b-15 border-default padding-t-0 padding-b-0">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4 col-sm-3 nopadding">
<img class="img-responsive" src="http://placehold.it/250x250">
</div>
<div class="col-xs-8 col-sm-9 border-l-default">
<div class="row"> <h4 class="col-xs-10 margin-t-15 text-ellipsis">Article pokeball superpotion lighting boltubertext pokemon pikachu</h4>
<div
class="col-xs-2 padding-t-15"> <span class="pointer pull-right">
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
<div class="product-det col-xs-12 line-h-35">
<div class="row">
<div class="col-xs-4">ITEMID</div>
<div class="col-xs-4">
<div class="input-group">
<input class="form-control" placeholder="qnt" type="text"> <span class="input-group-btn">
<button class="btn btn-secondary" type="button">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-4"><span class="pull-right">3.203 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="">Right content</div>
</div>
CSS
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.padding-15 {
padding: 15px;
}
.padding-t-15 {
padding-top: 15px;
}
.margin-b-15 {
margin-bottom: 15px;
}
.border-default{
border: 1px solid #e0e0e0;
}
.padding-t-0 {
padding-top: 0px;
}
.padding-b-0 {
padding-bottom: 0px;
}
.nopadding {
padding: 0;
}
.line-h-35 {
line-height: 35px;
}
.border-l-default {
border-left: 1px solid blue;
}

Answer 1

Try the following:
Html:
<div class="row row-eq-height">
<!--The div columns you want them to be same height should be here-->
</div>
CSS:
/*
Row with equal height columns
*/
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

Answer 2

you can try javascript to do this. because bootstrap col is changing width overtime when you change your devices. I like it, it typeless and you can put the class in your image wrap and your product descript wrap like so:
var st = $('.squarethis').width();
$('.squarethis').css({'height':st+'px'});
$('.sameheight').css({'height':st+'px'});
.wrapper{
background:#ccc;
width:100%;
height:100%;
display:flex;
flex-wrap:wrap;
flex-direction:row;}
.prodImage{
width:30%;
background:red;}
.prodDesc{
width:70%;
background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="prodImage squarethis"></div>
<div class="prodDesc sameheight"></div>
</div>
it will apply on your bootstrap. try to input this.
let me explain what happened:
$('.squarethis').css({'height':st+'px}); it will make your image always square, and it don't care what devices you using.
$('.sameheight').css({'height':st+'px'}); and this thing will make your next bootstrap col following the height of your previous col.
don't forget to input a class in your image wrapper and description wrapper

Answer 3

I'd suggest you to look at bootstrap v4 which comes with awesome features, like flexbox grid.
It does just what you need - example:
#foo{
background-color: aqua;
height: 300px;
}
#bar{
background-color: yellow;
}
<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6" id="foo">foo</div>
<div class="col-sm-6" id="bar">bar</div>
</div>
</div>
JSFiddle

Answer 4

You can tune this cell (product description) using plain css. Just a little modify class .border-l-default:
.border-l-default {
border-left: 1px solid blue;
height: 100%;
position: absolute;
right: 0;
}
bootply

Answer 5

Try to change the text ellipsis like that, it is a bit rude because i didn't use bootstrap classes, but it works fine to me:
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 71px;
}

Answer 6

Try to set min-height in different mediaquery
.border-l-default {
border-left: 1px solid blue;
min-height: 135px;