html - How to make image stretch to a specific paragraph?

Question

Here is the prototype I am trying to implement Here is what I have right now.

I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.

Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle

Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.

Here is my code for setting height in both the image and the div containing the image

The div

 .sidebar {
    display:inline-block;
    vertical-align:top;
    width:70%;
        height:3%;
    }

The image

#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}

The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.

Does anyone know to scale the height of the image in this situation?

Answer 1

How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".

So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.

If anyones curious, here is my final img html tag code(height of 240 pixels)

<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />