Create two divs of the same size

Question

I have two columns in a row. I want the row height to be the height of a smaller column and the larger column to be scrollable. Is it possible to do without using javascript?

<div class="row">


  <div class="col-md-8">

    <span style="color:white">Wash-type</span>
    <form>
      <!-- dummy data-->
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r1"><span>Option 1</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 2</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>option 3</span></label>
      <label class="customCheckbox">
        <input type="radio" name="r1" value="r2"><span>Option 4</span></label>
    </form>


  </div>

  <div class="col-md-4" style="oveflow:scroll;">
    <div class="table-responsive">
      <table class="table">
        <thead>

          <tr>
            <th>#</th>
            <th>Service Option</th>
            <th>Price</th>

          </tr>

        </thead>
        <tbody>

        </tbody>
    </div>
  </div>

  </table>

</div>

Answer 1

This is a JS solution unless you find another https://jsfiddle.net/2Lzo9vfc/21/

Js

$(window).resize(setHeight);
$(document).ready(setHeight);

function setHeight() {
    var height = $('.left').height();
    $('.row, .right').height(height);
}

CSS

.right {
    overflow-y: scroll;
}

HTML

    <div class="row">


    <div class="col-md-8 left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p>

        <span style="color:white">Wash-type</span>
        <form>
            <!-- dummy data-->
            <label class="customCheckbox"><input type ="radio"  name="r1" value="r1"><span>Option 1</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 2</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>option 3</span></label>
            <label class="customCheckbox"><input type ="radio" name="r1" value="r2"><span>Option 4</span></label>
        </form>


    </div>

    <div class="col-md-4 right">
        <div class="table-responsive">
            <table class="table">
                <thead>

                    <tr>
                        <th>#</th>
                        <th>Service Option</th>
                        <th>Price <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci quidem itaque, reiciendis minima! Unde, in est. Cumque, voluptates, facilis. Earum magnam et error modi, numquam quo? Beatae, vel placeat. Dignissimos, neque, eos! In quasi et laboriosam nam vero quia rem placeat. Asperiores iusto magni eos ipsam veritatis? Eaque, quisquam!</p> </th>

                    </tr>

                </thead>
                <tbody>

                </tbody>
            </div>
        </div>

    </table>

 </div>