JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<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>

CSS

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