I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px

My code is as below..

```
<head>

    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>

<body id="home">
    <div class="intro">

        <div class="row">
            <div class="col-xs-5" style="background-color:blue">

                <img src="img/mockleft.png" alt="logo" style="width:100%;">

            </div>
            <div class="col-xs-1"></div>
            <div class="col-xs-6" style="background-color:red;">

                <img src="img/mockright.png" alt="logo" style="width:100%;">

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

</body>

```

The output is as below..
[![screenshot](https://i.stack.imgur.com/nG0Vr.png)](https://i.stack.imgur.com/nG0Vr.png)

I wish for two things..

a) The left div with blue background should be same height as right div with red background and vice versa.

b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.

I tried the vertical-align css to both the div as well as image without success.

All help is sincerely appreciated

Thanks