Make Picture Inline With Multiple Lines Of Text [HTML/CSS]

Question

I am fairly new at HTML and CSS and I would like to know how to make my image inline with multiple lines of text.

Here is my current HTML code:

<div class="row">
    <div class="columnPhoto">
        <div class="profile">
            <img id="profilePic" src="profile_pic.png" alt="Profile Picture" />
        </div>
    </div>
    <div class="columnContent">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
    </div>
</div>

and my CSS code:

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.columnPhoto{
    float: left;
    width: 25%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.profile{
    border: 5px solid #333;
    width: 215px;
    height: 215px;
    margin-left: 80%;
    margin-bottom: 20px;
}

#profilePic{
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

.columnContent{
    float: left;
    width: 75%;
    position: relative;
    min-height: 1px;
    margin-top: -10%;
    padding-right: 15px;
    padding-left: 20%;
    vertical-align: middle;
}

Kind of in the style of the My Profile section of this website: http://turqmelon.com/

My test website that I'm using is http://arhsjtest.weebly.com/ and it's using the same code I have right now. The issue with it is that since I have preset margins and padding for columnContent, when you shrink your window the words no longer align with the image.

Thanks!