Bootstrap gird row same height - html

Question

I know this question has been asked a number of times but for my problem the proposed solutions are not working.
I am presenting a PDF to a user in a modal along side a form. Image below.
The problem I am having is that the iframe is set at 100% for the maximum size it will go to at 100% is as per the image.
If I give is a fixed size of 435px; it sizes to the right aspect for my screen. As I need this to be screen agnostic I want it to size its self according to the modal that it appears in.
I have tried using the working example from here http://www.bootply.com/92230 and this example is the same as I have seen all over the web this morning.
The HTML for this is
<div class="row">
<div id="equalheight">
<div id="loa" class="col-md-6 demo NotShown">
<iframe src="\\sqlmuldvwsk06.ukskpre.santanderuk.pre.corp\Public\CMCFileUpload\LOAFiles\SRA557034_321043.004.pdf" class="mh100Percent mw100" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
<div id="custDetails" class="col-md-12 demo">
...
</div>
</div>
</div>
The reason I am having to use an iFrame is because I am working on an application that is for internal use on a corporate LAN and when I try and embed the pdf as an object I get an Access Denied error.
Also, when an event if fired, the div custDetails is resized to a col-md-6 and when the modal is finished with the divs are resized \ reclassed.
Any and all help on how to show the iFrame the same size as the form next to it would be great.
thanks
Simon

Answer 1

<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
iframe {
height: 100%;
position: absolute;
}
</style>
<div class="row row-eq-height">
<div id="loa" class="col-md-6 demo NotShown">
<iframe
src="\\sqlmuldvwsk06.ukskpre.santanderuk.pre.corp\Public\CMCFileUpload\LOAFiles\SRA557034_321043.004.pdf"
class="mh100Percent mw100" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
<div id="custDetails" class="col-md-6 demo">
...
</div>
</div>
Hope this will work

Answer 2

Here we go...
<div style="display:flex; flex-wrap:wrap; align-items: stretch;">
<div style="background-color:red; border: 2px solid black;">DIV 1<br/>DIV 1<br/>DIV 1<br/>DIV 1<br/></div>
<div style="background-color:green; border: 2px solid black;">DIV 2DIV 1<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/></div>
<div style="background-color:blue; border: 2px solid black;">DIV 3</div>
<div style="background-color:gray; border: 2px solid black;">DIV 4</div>
<div style="background-color:yellow; border: 2px solid black;;">DIV 5</div>
</div>
Hoping it helps...