Bootstrap cells with equal height - html

Question

I have the following
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
Text that<br>literally<br>spans<br>4 lines
</p>
</div>
</div>
</div>
and css
.box-cell
{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
So the problem that I am facing is that one of the cells is usually taller than the other.IS there any way for me to equalize how much height each cell takes up?
Searching didn't yield me which property I can manipulate to get same height :(
Here is jsfiddle
However in this fiddle I can not get them to be side by side to prove my point
EDIT: I guess I didn't specify it properly. I would like to have the borders be as tall as the tallest cell. So all the examples provided here actually take out the borders and instead color the background. If I do that then yes it gives illusion of every cell being the same, but I would like there to be a border of same height.

Answer 1

I tried replicating what it sounds like you are looking for.
I would recommend you mess around with flexbox since it seems to do exactly what you are looking for.
<div class="myc">
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
</div>
And for the CSS
.myc {
display: flex;
}
.col {
background-color: yellow;
margin-right: 20px;
}

Answer 2

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-4" style="background-color: green">
some content
</div>
<div class="col-xs-6 col-sm-4" style="background-color: orange">
some content
<img src="http://placehold.it/100x120">
</div>
<div class="col-xs-6 col-sm-4" style="background-color: magenta">
some of content
</div>
</div>

Answer 3

Some options to solve it:
Different Tricks on How to Make Bootstrap Columns All the Same Height

Answer 4

<style type="text/css">
.box-cell{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
</style>
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
<span>Text that</span>
<span>literally</span>
<span>s4 lines</span>
<span>ygthfg</span>
</p>
</div>
</div>
</div>
1- you need to add text in span tag.
2- Or take text in one line .