Responsive table height Bootstrap

Question

How can I make table height to be responsive when displayed inside row element? In this row element there are two tables and an image, so that row height is set to fit this image. Or maybe there is another way to make labels for image with fixed size? I just found the way to set table height using something like { height: 120%; }, but its not responsive.

Code:

<div className="row">
  <div className="col-md-8">
    <div className="col-md-2">
      <div className="table-responsive">
        <table className="table">
          <thead>
            <tr>
              <th className="text-center vert-align">Table1</th>
            </tr>
          </thead>
          <tbody>
            {table1Content}
          </tbody>
        </table>
      </div>
    </div>
    <div className="col-md-5">
      <img className="img-responsive" src={"data:image/jpg;base64," + this.state.image.image} />
    </div>
    <div className="col-md-2">
      <div className="table-responsive">
        <table className="table">
          <thead>
            <tr>
              <th className="text-center vert-align">Table2</th>
            </tr>
          </thead>
          <tbody>
            {table2Content}
          </tbody>
        </table>
      </div>
    </div>
  </div>

Solution

Using display: flex; and also set height for .table and .table-responsive.

Add row-eq-height to your row, and remove an old class col-md-8, if you want use col-*-x, please add more row div outside, because it can be wrong with float attribute of col-*-x.

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.table {
  background-color: #eee;
  height: 100%;
  margin-bottom: 0;
}
.table-responsive {
  height: 100%;
}

Check result here: https://jsfiddle.net/6eq89r4r/2/