Keeping P Element Inside A Div

I would like to make this div responsive and keep the text in the center of it the entire time. As of now, it looks fine on mobile since I added media queries to it, but on desktop the p element in my .info-p-div goes into the div below and looks awful. These divs are side-by-side on the page. I will post my HTML and CSS code relating to this section of the page so you can see what I mean.

HTML

<div class="info">
<div class="info-img-div">
<img src="images/owner.jpg" />
<p><font color="#F5F5F5">Text here</font></p>
</div>
<div class="info-p-div">
<p><font color="#F5F5F5">Text here</font></p>
</div>
</div>
<div class="parallax-3"></div>

CSS

.info   {
    text-align: center;
    min-height: 250px;
    width: 100%;
    background-color: #000;
}

.info-img-div   {
    position: left;
    width: 35%;
    border-right-style: solid;
    border-color: #F5F5F5;
}

.info-img-div img {
    border-radius: 50%;
    height: 25%;
    width: 25%;
    min-height: 100px;
    min-width: 100px;
    margin-top: 20px;
}

.info-p-div {
    height: 25%;
    width: 50%;
    max-width: 65%;
    text-align: center;
    position: relative;
    float: right;
    font-size: 12px;
    word-wrap: break-word;
    vertical-align: middle;
}

.parallax-3 {
    background-image: url("images/background3.jpg");
    height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 600px)   {
    .info   {
        text-align: center;
        float: none;
        height: 50%;
    }
    .info-img-div   {
        float: none;
        border-right-style: none;
        position: relative;
        width: 100%;
    }
    .info-p-div {
        float: none;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
}


I think you are looking for below solution.

I posted an working example.