How do I resize an image size automatically loaded in different browsers and screen size?

I have a paragraph floated in right and an image floated in left. They are staying in the same row. Now I want to make the paragraph and image width always be the equal, whichever browser they run in or whatever the window or screen size they get. Their size should match automatically. How do I do it?

In my program I have used width and height, but I am not sure they can fix the size automatically.

This piece of code I am working in: Also look in http://ift.tt/1cKl6Nz

.HTML:

    <p>
        The height of this paragraph must be the same as the height of
        the picture.
        The height of this paragraph must be the same as the height of
        the picture.
        The height of this paragraph must be the same as the height of
        the picture.

    </p>
<div id="image">
<img alt="" src="http://ift.tt/1Fa8iZ3" width="200" height="200" >
    </div>

.CSS:

p{
    margin-left:240px;
}

#image{
    margin-top:-210px;
}