Vertically centre child in floated parent - html

Question

Question:
Is it possible to vertically centre a child element in a floated div in relation to the dynamic height of a floated div along side it?
Desired result
Background:
I'm using a WordPress theme which has shortcodes for creating columns. The columns are created through floated divs. As such, I'd like to stick to using float, instead of using a table layout as has been suggested to similar questions (Vertically center content of floating div).
I'd like the result to be responsive. The image height changes with the screen width, and so I cannot set explicit height or margins on the p element.
The text in p is also more than one line, so I cannot set line-height as a solution (Vertically centre a div).
Example:
http://codepen.io/besiix/pen/rxdOWM
.wrapper {
background-color: #50C5B7;
padding: 5px;
}
.image {
width: 100%;
}
.clear {
clear: both;
}
.one-half {
float: left;
width:48%;
margin-right: 4%;
background-color: lightgrey;
position: relative;
display: inline;
box-sizing: border-box;
}
.last {
clear: right;
margin-right: 0;
}
<section class="wrapper">
<div class="one-half">
<p class="v-center"> This wants to be centered vertically in relation to the image on the right.</p>
</div>
<div class="one-half last">
<img class="image" src="http://www.premiercottages.co.uk/images/regions/Scotland.jpg">
</div>
<div class="clear"></div>
</section>

Answer 1

You could use flexbox, see jsfiddle https://jsfiddle.net/d5Lptwut/2/
<section class="wrapper">
<div class="one-half vertical-align">
<p> This wants to be centered vertically in relation to the image on the right.</p>
</div>
<div class="one-half last">
<img class="image" src="http://www.premiercottages.co.uk/images/regions/Scotland.jpg">
</div>
</section>
.wrapper {
background-color: #50C5B7;
padding: 5px;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.image {
width: 100%;
height: auto;
}
.one-half {
width:48%;
margin-right: 4%;
background-color: lightgrey;
display: inline-block;
box-sizing: border-box;
}
.vertical-align {
flex-item-align: center;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.last {
margin-right: 0;
}

Answer 2

you can try this one:
.wrapper {
background-color: #50C5B7;
padding: 5px;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.image {
width: 100%;
height: auto;
}
.one-half {
width:48%;
margin-right: 4%;
background-color: lightgrey;
display: inline-block;
box-sizing: border-box;
}
.vertical-align {
flex-item-align: center;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.last {
margin-right: 0;
clear:both;
}
DEMO HERE

Answer 3

you can use display: inline-block, this allow vertical-alignelements:
http://codepen.io/yukulele/pen/bEvYEZ?editors=1100