I am trying to align two responsive containers in a row. One of them with image inside set to width: 100% and height: auto. How to vertically align image at the top of its parent responsive container ?

<div class="top-row">
  <figure class="product-image col-sm-6">
    <img src="http://rastenis.lt/coocoo/image/cache/catalog/Demo/Untitled.Oil%20on%20canvas.45x55%20cm.2011-570x600.JPG" class="img-r" alt="img">
  </figure>
  <article class="description col-sm-6">
    <h1 class="p-heading">ELEPHANTS ARE COMING BACK</h1>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes </p>
  </article>
</div>

.top-row {
  width: 100%;
}
figure img {
  width: 100%;
  height: auto;
}

Here is my example: https://jsfiddle.net/2sg209o0/

Your example code shown here: https://jsfiddle.net/2sg209o0/ has most of the correct code you are looking for. To verify this, feel free to add in this CSS to their appropriate selectors so that your css looks like this:

.top-row {
    width: 100%;
    border:1px dotted blue;
}
figure img {
    width: 100%;
    height: auto;
    border:1px dashed red;
}

If you were to right click the image and inspect the element, you'll see that the image contains white pixels at the top and bottom. The image is indeed aligned along the top edge of the immediate container, as you've asked:

How to vertically align image at the top of its parent responsive container ?

However, it seems like you're asking for the image to be aligned at the top of the containing div, "top-row", along with the other content. To do this, you will need to add in a bit more style. Namely, the issue revolves around floats and your usage of the "Figure" element.

The figure tag, like many other tags, are given pre-existing styles from the browser. One of those styles is a margin. After reading through the below code-block, feel free to click the following JS fiddle link for the final code in a live example. I've added the necessary styles and cropped the image (and put it on imgur) for you. Feel free to customize to your bidding; I'm not entirely sure what the end goal is here, save for some form of a product display.

.top-row {
  width: 100%;
  border:1px dotted red; /* to show you top-row's boundaries */
}

figure{
  margin:0 1em 1em 0; /* override browser styles */
  width:50%;   /* give article some room in top-row */
  float:left;  /* floats are powerful tools for layouts and whatnot */
}

figure img {
  width: 100%;
  height: auto;
}

https://jsfiddle.net/pa04oxmt/

Note: your image may overflow its container, but I'm sure you know how to fix that :) edit: fixed typos n whatnot