Keeping P Element Inside A Div - html

Question

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%;
}
}

Answer 1

I think you are looking for below solution.
I posted an working example.
.box {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
height: 300px;
background: tomato;
}
.box p {
flex: 1 0 0;
text-align: center;
}
#media screen and (max-width:600px) {
.box {
flex-direction: column;
}
.box p {
display: flex;
justify-content: center;
align-items: center;
}
}
<div class="box">
<p>One</p>
<p>Two</p>
</div>