How to align image height with div next to it in Bootstrap grid system?

Question

I want to align img element and div element in same line like this:

(Button should be horizontally aligned with bottom line of image. Top side same)

I want to align them perfectly even in mobile devices(sm, eg iPad), too

**index.html **

<div class="row">
    <!-- IMAGE -->
    <div class="col-md-8">

        <div class="thumbnail relative margin-bottom-3">
            <figure style="position: relative; overflow: hidden;">
                <img class="img-responsive" id="product-image" src="" alt="shop first image" style="width:610px; height:352px;">
            </figure>
        </div>
    </div>
    <!-- /IMAGE -->

    <!-- ITEM DESC -->
    <div class="col-md-4">
        <div class="clearfix margin-bottom-15">
        </div>

        <div class="form-group">
             {% crispy item_form %}
        </div>

    </div>
    <!-- /ITEM DESC -->
</div>

How could I implement it?

Answer 1

ok then, let me try to answer this.

for now let's part from bootstrap and do traditional code. more typing.

 section{ display:flex; flex-wrap:wrap; flex-direction:column; position:relative; width:100%; height:200px; margin:0; padding:0; border:1px black solid;} .withImage{ display:flex; width:70%;} .withImage img{ width:100%;} .withForm{ width:30%; height:100%; padding:0; align-items:center; position:relative;} form{ width:100%; height:100%;} .withForm ul{ list-style:none; padding:0; margin:0; width:100%; height:100%; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; } .withForm li{ width:80%; } .withForm li:last-child{ display:flex; align-items:flex-end; justify-content:center; } .withForm input{ width:50%; margin:0px;} 

 <section> <div class="content withImage"> <img src="http://imagecolony.com/wp-content/uploads/2016/09/Wallpaper-Wide-803.jpg"> </div> <div class="content withForm"> <form> <ul> <li>text <input type="text" placeholder="sometext"></li> <li>text <input type="text" placeholder="sometext"></li> <li>text <input type="text" placeholder="sometext"></li> <li>text <input type="text" placeholder="sometext"></li> <li><input type="submit" placeholder="enter"></li> </ul> </form> </div> </section> 

it should be easier if you using flex, and first of all i bet u never inspect your code. if you are using chrome to run your script please right click and inspect, what happened with your css.

you can find it all about flex in here

wish it will be help.